设置onclick以在循环中使用变量的当前值

Question

标题可能没有意义,也没有单独的描述,所以这里是代码的示例:

for(var a=0;a<10;a++) {
    var b=document.createElement('b')
    b.onclick=function() {
        alert(a)
    }
    b.innerHTML=a
    document.body.appendChild(b)
}

奇怪的是,当我将innerHTML设置为a时,它使用a的当前值.因此,此代码创建了10个<b>元素,其值为0,1,2,3,4,5,6,7,8和9.这非常有效.然而,onclick功能不是什么.a当单击任何这些元素时,它返回(10)的最终值.我已经尝试设置另一个变量a,然后在onclick事件中使用其他变量,但它仍然返回最终值a.如何使用aonclick设置时的值？

Answer 1

请尝试以下方法

b.onclick= function(arg) {
    return function() {
        alert(arg);
    }
}(a);

您遇到的问题是javascript不使用块范围.相反,所有变量都具有其包含函数的生命周期.因此,a在所有onclick功能中只捕获了一个,它们都看到了它的最终价值.

解决方案通过为每个作用域创建一个新函数和值然后立即将该值设置为当前值来解决此问题a.

这是一个有点扩展的版本,可能更具可读性

var createClickHandler = function(arg) {
  return function() { alert(arg); };
}

for(var a=0;a<10;a++) {
    var b=document.createElement('b')
    b.onclick = createClickHandler(a);
    b.innerHTML=a
    document.body.appendChild(b)
}