如何创建显示/隐藏不同对象的功能?

时间:2015-02-02 15:46:37

标签: javascript jquery

我有一个最小化按钮,可以将选择的可见性设置为'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;
}

我希望能够用一个按钮而不是两个按钮完成此操作

2 个答案:

答案 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选择器。