我有一个最小化按钮,可将选择的可见性设置为'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,您无需跟踪显示或隐藏的元素,它将为您处理。

10-05 20:42
查看更多