我想制作一个表单，您可以在其中使用按钮(使用 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>
最佳答案
如果您控制 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>
通用容器
您也可以将两者放在一个公共(public)容器中，并只使用这样的类名:
<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 值唯一或维护它们，并且代码会自动适用于其中的许多 block 你有。只要这两个项目(按钮和食品项目)留在容器中，即使 HTML 布局稍作修改，代码也不必更改。
第一个选项要求您维护 id 值。第二个选项要求您将 DOM 位置保持在按钮和食物项之间。
关于javascript - 如何将变量传递给 jQuery 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22276179/