Question

我有29个按钮：todayResultsbutton0 .. todayResultsbutton28，
和29个div：今天结果Ulsls0 ..今天结果Orls28。
我还有一个隐藏/显示给定div的函数toggleVisibility（divName）。我正在尝试使用以下代码：

for (var i=0;  i < 29; ++i) {
    var b = "#todayResultsbutton"+i;
    var d = "todayResultsUrls"+i;
    $(b).click(function(){toggleVisibility(d);});
}

我认为这会导致每个按钮单击以显示/隐藏匹配的div，但实际结果是单击任何按钮（0 ... 28）显示/隐藏最后一个div - todayResultsUrls28。

有人可以告诉我哪里错了吗？感谢。

Answer 1

使用课程。

$(".myClass").click(function() {
  var d = $(this).attr("id").replace("button", "Urls");
  toggleVisibility(d);
});

Answer 2

不要试图使用循环，最好使用选择器“找到”你的div ..

说你有类似的东西：

<table>
<tr><td>
<input type="button" id="myButton" value="test" text="test" />
</td><td><div id="myDiv"></div></td></tr></table>

您可以通过以下方式找到myDiv：

$('#myButton').parent().find('#myDiv').hide();

Answer 3

您可以使用带有id的“startsWith”属性选择器，然后根据所点击的项目的ID构建网址。

$('[id^=todayResultsbutton]').click( function() {
     var url = this.id.replace(/button/,'Urls');
     toggleVisibility(url);
});

Answer 4

使用

var d =“＃todayResultsUrls”+ i;

而不是

var d =“todayResultsUrls”+ i;

Answer 5

通过查找event target而不是类等的相关div来切换可见性。

假设：

<div id='todayResultsUrls1'>
    <button id='todayResultsbutton'></button>
</div>

使用事件目标，您可以获取button元素并找到要隐藏的div。

var parentDiv = $(e.target).parent();
toggleVisibility(parentDiv);

Answer 6

您可以使用：

$('button[id^="todayResultsbutton"]').click(function() {
    var index = this.id.substring(18,this.id.length);
    toggleVisibility("todayResultsUrls"+index);
});

这将找到ID为<button>的所有todayResultsbutton代码。然后，它会获取所点击代码的ID，移除其todayResultsbutton部分以获取ID，然后调用toggleVisibilty()函数。

示例here。

修改
注意：

在使用选择器（button）启动之前使用[id^="todayResultsbutton"]可以加速jQuery选择器，因为它可以使用本机getElementsByTagName函数来获取所有按钮标记，然后只检查那些具体ID。
使用
this.id代替jQuery的$(this).attr('id')因为它更快（不需要包装this或调用额外函数attr()）并且不应该导致任何交叉 - 浏览器问题。

如何使用JQuery将click函数分配给多个按钮？

6 个答案: