javascript - 向元素添加功能时保持“i”值

Question

我的情况：

var tds = document.getElementsByTagName("td");
for(i=0;i<tds.length;i++)
{
    tds[i].onclick = function()
                      {
                          alert(i);
                      };
}

预期结果：提醒TD数量。

但是，如果有 6 个 TD，则返回的值将始终是“i”的最后一个值。(6) 如何使“i”值在添加到函数时保持其值？

谢谢！

http://jsfiddle.net/nuKEK/11/

Answer 1

您需要关闭以捕获i价值。像这样的东西

function createFunction(i){
    return function(){
        alert(i);
    };
}

var tds = document.getElementsByTagName("td");
for(i=0;i<tds.length;i++){
    tds[i].onclick = createFunction(i);
}

演示：http: //jsfiddle.net/nuKEK/12/

Answer 2

您可以传递i给另一个函数以获取其值而不是对其的引用。在 javascript 中，数字是按值传递的。

tds[i].onclick = (function(x) {
    return function() {
        alert(x); // alerting x, i's value
    };
})(i); // passing i as parameter x

如果那个自动执行的匿名函数在你的循环上下文中看起来有点毛茸茸，你可以试试Array.prototype.forEach()：

[].forEach.call(document.getElementsByTagName("td"), function(td, i) {
    td.onclick = function() {
        alert(i);
    };
});

[编辑]看看这些选项及其性能。

Answer 3

这是 Javascript 中的常见错误之一，因为它不像大多数语言那样是块范围的。它是函数范围的。

您需要在 onclick 周围创建一个闭包来实现这一点。

for (i = 0; i < tds.length; i++) {

    (function (index) {
        tds[index].onclick = function() {
            alert(index);
        };
    })(i);

}

Answer 4

您必须将值强制到触发回调时仍然存在的范围内。

for(i=0;i<tds.length;i++){
  (function(){
    var _i = i;
    tds[i].onclick = function(){
      alert(_i);
    };
  })();
}

否则， 的值i将始终是最后一个索引

Answer 5

var tds = document.getElementsByTagName("td");
for(i=0;i<tds.length;i++)
{
    addClick(tds, i);
}


function addClick(where, i) {
    where[i].onclick = function()
    {
        alert(i);
    };
}