javascript - 如何制作一个功能来显示/隐藏不同的对象？

Question

我有一个最小化按钮，可将所选内容的可见性设置为“隐藏”。

我还有一个最大化按钮，可将所选内容的可见性设置为'visible'。

现在我只想用一个按钮来完成此操作，但能够将不同的选择传递给该按钮调用的函数。

如果我只在一个对象上使用该函数，我可以轻松地做到这一点。例如，我会创建一个变量，例如，hidden=false。一旦我单击按钮，它就会检查隐藏的内容是否等于。如果为 true，则会显示选择，然后将其更改为 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;
}

我希望能够通过一个按钮而不是像现在那样使用两个按钮来完成此操作

Answer 1

我将在按钮上使用一个类 (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>

这会将模板绑定(bind)到其自身(或可能的其他模板)，但允许您将 DOM 和脚本很大程度上分开。每个按钮都知道它应该切换哪些元素，使用 data-selector 属性中的 jQuery 选择器。

使用jQuery's toggle method ，您无需跟踪显示或隐藏哪些元素，它会为您处理。