0

可能重复：
在循环中添加“点击”事件监听器

我做了一个演示。所以让我们先看看HTML。

<a href="#" id="testA">testA</a>
<a href="#" id="testB">testB</a>    

<div id="showA">showA</div>
<div id="showB">showB</div>

我想将click事件绑定到 Elements a。当它点击时，alert相关的div. （点击id="testA"，提醒id="showA"...）

我编写了 jQuery 代码。

var arr = ["A","B"];    
  for(var i=0;i<arr.length;i++){
    $("#test"+arr[i]).click(function(){
      alert($("#show"+arr[i]).text())
    });
  }

但它不起作用。我调试这段代码，发现这段代码alert($("#show"+arr[i]).text())

仅在我单击a元素时运行。当我点击a. 变量i已经存在3。

所以我该怎么做？

4

2 回答 2

5

问题是一旦事件处理程序被执行，i将达到它的最终值并停留在arr.length. 您可以使用闭包来捕获i循环每次迭代的值：

var arr = ["A","B"];    
for(var i=0;i<arr.length;i++) {
    (function (i) {
        $("#test"+arr[i]).click(function(){
            alert($("#show"+arr[i]).text())
        });
    }(i));
}

这是一个工作示例。

于 2012-11-05T06:58:39.663 回答
2

最简单/最干净的解决方案是使用forEach循环。

arr.forEach(function(val) {
  $("#test"+ val).click(function() {
    alert($("#show"+ val).text())
  });
});

如果你想支持旧版浏览器，网上有很多 polyfill。

编辑：由于您使用 jQuery，您也可以使用$.each：

$.each(arr, function(idx, val) { ... });
于 2012-11-05T07:02:41.783 回答