如何使用JQuery为许多按钮分配点击功能

How can I assign click function to many buttons using JQuery?

本文关键字：分配 功能 按钮 许多 何使用 JQuery      更新时间：2023-09-26

我有29个按钮:todayResultsbutton0 ..todayResultsbutton28,
和29div: todayresultsurl0 ..todayResultsUrls28。
我也有一个函数toggleVisibility(divName)隐藏/显示给定的div。我正在尝试使用以下代码:

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.

谁能告诉我我错在哪里?
谢谢。

使用一个类

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

与其尝试使用循环，不如使用选择器来"查找"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();

您可以使用带有id的"startsWith"属性选择器，然后从被单击项的id构建url。

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

使用

var d = "#todayResultsUrls"+i;

不是

var d = "todayResultsUrls"+i;

你可以这样做:

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

这将查找id以todayResultsbutton开头的所有<button>标签。然后，它将获得所单击标签的ID，删除其todayResultsbutton部分以获得ID，然后调用toggleVisibilty()函数。

例子。

编辑
注:

  • 使用button之前与选择器([id^="todayResultsbutton"])开始加速jQuery选择器，因为它可以使用本地getElementsByTagName函数来获取所有按钮标签，然后只检查那些特定的ID。
  • this.id被用来代替jQuery的$(this).attr('id')，因为它更快(不需要包装this或调用额外的attr()函数)，不应该导致任何跨浏览器问题。

通过使用事件目标而不是类等查找相关div来切换可见性

假设:

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

使用事件目标，您可以获得按钮元素并找到您想要隐藏的div。

var parentDiv = $(e.target).parent();
toggleVisibility(parentDiv);
相关文章：