如何在Javascript中使用循环生成事件处理程序？

Question

如何在Javascript中使用循环生成事件处理程序？

例如，我有10个从Ajax响应生成的标记：

<a href="#" id="b1">b1</a><a href="#" id="b2">b2</a><a href="#" id="b3">b3</a><a href="#" id="b4">b4</a><a href="#" id="b5">b5</a>
<a href="#" id="b6">b6</a><a href="#" id="b7">b7</a><a href="#" id="b8">b8</a><a href="#" id="b9">b9</a><a href="#" id="b10">b10</a>

我需要通过循环将onClick事件分配给他们中的每一个：

for(i=1; i<11; i++) {
    document.getElementById("b"+i).onclick=function() {
        alert(i);
    }}

这不起作用，它只分配给最后一个标签和警告“11”。我怎么才能让这个起作用？我宁愿不使用jQuery。

Answer 1

结束语是你想要的：for(i=1;&nbsp;i<11;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;(function(i)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("b"+i).onclick=function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(i); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;})(i);}

Answer 2

在这个问题上有两种使用闭包的方法。这样做的目的是为事件处理程序使用的每个迭代创建一个带有“i”变量快照的范围。解决方案1(正如Kevin提到的那样)：for(i=1;&nbsp;i<11;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;(function(num)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("b"+num).addEventListener('click',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(num); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;})(i);}解决方案2：for&nbsp;(i=1;&nbsp;i<11;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("b"+i).addEventListener('click',&nbsp;(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;num&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(num); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;})());}