Question

我想创建一个表单，您可以使用按钮（使用jQuery）隐藏（切换）不必要的行。我已经开始在页面上工作，但除非我可以重用jQuery函数，否则我必须为每个按钮编写一个函数，这可能是几十次。如何将变量传递给函数，以便我可以对所有按钮使用相同的函数？

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
  $(document).ready(function(){
    $("#button1").click(function(){
      $("#para1").toggle();
    });
  });
</script>

<script>
  $(document).ready(function(){
    $("#button2").click(function(){
      $("#para2").toggle();
    });
  });
</script>

</head>
<body>


<button id="button1">Meat</button><br>
<div id="para1">Meat<br>
More meat</div>

<button id="button2">Bread</button><br>
<div id="para2">Bread<br>
More bread</div>

</body>
</html>

Answer 1

如果你控制HTML（你看起来像这样），有很多方法可以解决这个问题。您的问题的一般答案是您不要将信息传递给事件处理程序。您可以在事件处理程序中使用指向单击按钮的this值，然后确定对于给定的单击操作哪个段。

一个选项是向按钮添加一个数据属性，告诉它要切换哪个div，然后在点击处理程序中，从点击的按钮中获取数据属性并切换该项目。

数据属性

<button class="buttonToggle" data-para="para1">Meat</button><br>
<div id="para1">Meat<br>
More meat</div>

<button class="buttonToggle" data-para="para2">Bread</button><br>
<div id="para2">Bread<br>
More bread</div>

<script>
  $(document).ready(function(){
    $(".buttonToggle").click(function(){
      var id = $(this).data("para");
      $("#" + id).toggle();
    });
  });
</script>

公共容器

您也可以将它们放在一个公共容器中，并且只使用这样的类名：

<div class="toggleContainer">
<button class="buttonToggle">Meat</button><br>
<div class="foodItem">Meat<br>
More meat</div>
</div>

<div class="toggleContainer">
<button class="buttonToggle">Bread</button><br>
<div class="foodItem">Bread<br>
More bread</div>
</div>

<script>
  $(document).ready(function(){
    $(".buttonToggle").click(function(){
      $(this).closest(".toggleContainer").find(".foodItem").toggle();
    });
  });
</script>

Dom位置

或者，您可以保持当前的HTML并严格地在DOM中定位：

<button id="button1">Meat</button><br>
<div id="para1">Meat<br>
More meat</div>

<button id="button2">Bread</button><br>
<div id="para2">Bread<br>
More bread</div>

<script>
  $(document).ready(function(){
    $("#button1, #button2").click(function(){
      $(this).next().next().toggle();
    });
  });
</script>

就个人而言，我更喜欢第二个选项（使用公共容器），因为它非常健壮且仅使用类名，因此您不必使ID值唯一或维护它们，并且代码会自动适用于这些块中的许多块你有。只要两个项目（按钮和食品项目）保留在容器中，即使HTML布局稍微修改，代码也不必更改。

第一个选项要求您维护id值。第二个选项要求您在按钮和食物项之间保持DOM位置。

Answer 2

此示例使用自定义data-hide属性来定义要隐藏的元素。另请注意，点击已绑定到class="button" =每个带有类按钮的元素，而不是id。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
  $(document).ready(function(){
    $(".button").click(function(){
      var elementToHide = $(this).data("hide");
      $("#"+elementToHide).toggle();
    });
  });
</script>

</head>
<body>


<button class="button" id="button1" data-hide="para1">Meat</button>
<br>
<div id="para1">Meat<br>
More meat
</div>

<button class="button" id="button2" data-hide="para2">Bread</button>
<br>
<div id="para2">Bread<br>
More bread
</div>

如何将变量传递给jQuery函数？

2 个答案: