我有一个最小化按钮,可以将选择的可见性设置为'hidden'
。
我还有一个最大化按钮,可以将选择的可见性设置为'visible'
。
现在我想只用一个按钮来做这个,但是能够通过不同的选择来传递这个按钮调用的功能。
如果我只在一个对象上使用该函数,我可以轻松地执行此操作。例如,我会创建一个变量,比如,hidden = false。一旦我点击按钮,它将检查隐藏等于什么。如果是,那么它将显示选择然后将其更改为false。如果为false,则会隐藏选择并将其更改为true。
现在我想这样做,这样我就可以将对象传递给一个函数,然后为该函数检查该选择的隐藏值是什么。
我想创建一个函数,因为我希望能够重用这段代码,而不是每次想要显示/隐藏某些东西时都要做很多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;
}
我希望能够用一个按钮而不是两个按钮完成此操作
答案 0 :(得分:3)
我会在按钮(button.toggle
)上使用一个类,并使用一个数据属性来保存要修改的元素选择器。
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>
这会将模板绑定到自身(或可能是其他模板),但允许您将DOM和脚本保持在很大程度上分开。每个按钮都知道应该使用data-selector
属性中的jQuery选择器来切换哪些元素。
使用jQuery's toggle method,您无需跟踪显示或隐藏的元素,它会为您处理。
答案 1 :(得分:2)
一般方法:
function generalHideOrShow(element)
{
if (element instanceof Element)
{
//single element passed
element = [element]; //mimic node list
}
if(element.length && element.length > 0 && element[0] instanceof Element)
{
//node list
for (var i = 0; i < element.length; ++i)
{
if (element[i].getAttribute("data-hidden") == "true" )
{
$(element[i]).removeClass("hidden");
element[i].setAttribute("data-hidden", false);
}
else
{
element[i].setAttribute("data-hidden", true);
$(element[i]).addClass("hidden");
}
}
}
else
{
return false;
}
}
$("#button1").click(function(){
generalHideOrShow($("div"));
});
$("#button2").click(function(){
generalHideOrShow($("span"));
});
$("#button3").click(function(){
generalHideOrShow(document.body.querySelectorAll("span:nth-child(odd)"));
});
.hidden{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>test div 1</div>
<div>test div 2</div>
<div>test div 3</div>
<div>test div 4</div>
<span>test span 1</span>
<span>test span 2</span>
<span>test span 3</span>
<span>test span 4</span>
<br />
<button id="button1">Click to toggle the divs</button>
<button id="button2">Click to toggle the spans</button>
<button id="button3">Click to toggle the even spans</button>
使用:
generalHideOrShow( $("divs") );
这将为函数提供一系列元素。
此函数适用于element
(例如,以document.getElementById("element")
传递),节点列表(例如,以document.querySelectorAll("div")
传递)和jQuery选择器。