我有一个最小化按钮,可将选择的可见性设置为'hidden'
。
我还有一个最大化按钮,它将选择的可见性设置为'visible'
。
现在,我只想用一个按钮来执行此操作,但是能够通过不同的选择传递给该按钮调用的功能。
如果仅在一个对象上使用该函数,则可以轻松完成此操作。例如,我将创建一个变量,例如hidden = false。单击按钮后,它将检查隐藏的内容是否等于。如果为true,则显示选择内容,然后将其更改为false。如果为假,它将隐藏选择并将其更改为真。
现在,我想执行此操作,以便可以将对象传递给一个函数,然后让该函数检查该选择的隐藏值是什么。
我想做一个函数,因为我希望能够重用此代码,而不是每次我想显示/隐藏某些东西时都要做很多if语句。
我已经有了。
//Pseudo code of buttons
MinimizeButton = onClick(hideThis(selection1));
MaximizeButton = onClick(ShowThis(selection1));
function hideThis(selection){
selection.classed("hidden", true);
}
function showThis(selection){
selection.classed("hidden", false);
}
.hidden{
visibility:hidden;
}
我希望能够使用一个按钮而不是现在的两个按钮来完成此操作
最佳答案
我会在按钮(button.toggle
)上使用一个类,并使用一个包含要修改的元素选择器的data属性。
function toggleBySelector() {
var target = $(this).data("selector");
$(target).toggle();
}
$("button.toggle").on("click", toggleBySelector);
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
<button class="toggle" data-selector="#single">Toggle Single</button>
</div>
<div>
<button class="toggle" data-selector=".red">Toggle Red</button>
</div>
</div>
<div>
<div class="red">Red Div</div>
<div id="single">Single Div</div>
<div class="red">Additional Red Div</div>
</div>
这会将模板绑定(bind)到自身(或可能的其他模板),但是允许您将DOM和脚本保持很大的分离。每个按钮都使用
data-selector
属性中的jQuery选择器知道应该切换哪些元素。使用jQuery's toggle method,您无需跟踪显示或隐藏的元素,它将为您处理。