如何在Javascript中生成带循环的事件处理程序？
如何在Javascript中生成带循环的事件处理程序？
提问于 2011-06-27 07:20:20
例如，我有10个从AJAX响应生成的a标记：
<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);
}
}这不起作用，它只将onclick分配给最后一个标签，并警告"11“。我怎么才能让它工作呢？我不喜欢使用jQuery。
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-06-27 07:22:14
您的所有处理程序都共享同一个i变量。
您需要将每个处理程序放入一个单独的函数中，该函数接受i作为参数，以便每个处理程序都有自己的变量：
function handleElement(i) {
document.getElementById("b"+i).onclick=function() {
alert(i);
};
}
for(i=1; i<11; i++)
handleElement(i);Stack Overflow用户
发布于 2011-06-27 07:24:58
闭包就是你想要的：
for(i=1; i<11; i++) {
(function(i) {
document.getElementById("b"+i).onclick=function() {
alert(i);
};
})(i);
}Stack Overflow用户
发布于 2014-01-31 13:24:35
有两种方法可以使用闭包来解决这个问题。其思想是为事件处理程序使用的每个迭代创建一个带有"i“变量快照的作用域。
解决方案#1 (正如Kevin提到的)：
for(i=1; i<11; i++) {
(function(num) {
document.getElementById("b"+num).addEventListener('click', function() {
alert(num);
});
})(i);
}解决方案#2：
for (i=1; i<11; i++) {
document.getElementById("b"+i).addEventListener('click', (function(){
var num = i;
return function() {
alert(num);
}
})());
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6487366
复制相关文章
相似问题
腾讯云开发者
