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);
}

DEMO：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);
    };
});

[edit] 查看these options and their performance。

Answer 3

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

您需要在onclick周围创建一个闭包来实现此目的。

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

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

}

Answer 4

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);
    };
}

Answer 5

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

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

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

在向元素添加函数时保留“i”值

5 个答案: