Question

可能重复：
Assign click handlers in for loop

我的代码中需要一个循环的帮助。

我遍历一个数组并添加对div的点击。但它总是在循环的最后一个循环中添加onclicks并有效地取消它之前的循环。

所以我把它作为我的循环：

    start = 0;

for(i = start; i < (start+8); i++){ //8 per page
    if(i == array.length){ 
        break;  //page end
    } else {
        (function(i){
             document.getElementById('cell'+i).onclick = function(){ select(i); }
        })(i);  
    }
}

此处发生的是div id cell7添加了点击次数，但div cell0到cell6没有。我猜这与i在循环中发生变化这一事实有关，因此也影响了函数中的i？

如何解决此问题？

Answer 1

你很亲密：

(function(i){
    document.getElementById('cell' + i).onclick = function(){ select(i); }
})(i);

我认为你想要的是：

document.getElementById('cell'+i).onclick = (function(i){
    return function(){ select(i); }
})(i);

另外，因为你有：

for(i = start; i < (start+8); i++)

i未声明，因此变为全局。声明'i'将其保持为本地（假设这是功能代码）：

for (var i = start; i < (start+8); i++)

如果它是全局代码，它将没有任何区别（但无论如何都要声明它）。

修改

上述内容无法解决您的问题，只是更改了语法。

以下“适用于我”，cell0到cell7获取一个监听器，其余的则没有。 select显示正确的值（0到7取决于单击哪一个）。

<script>
    function addListener() {
      var start = 0;
      for(i = start; i < (start+8); i++){ 
        document.getElementById('cell'+i).onclick = (function(i){
            return function(){ select(i); }
        })(i);  
      }
    }
    function select(arg) {
      alert(arg);
    }
    window.onload = addListener;
</script>

<p id="cell0">0</p>
<p id="cell1">1</p>
<p id="cell2">2</p>
<p id="cell3">3</p>
<p id="cell4">4</p>
<p id="cell5">5</p>
<p id="cell6">6</p>
<p id="cell7">7</p>
<p id="cell8">8</p>
<p id="cell9">9</p>

Answer 2

试试这个example。 var i = 1，假设您的HTMLElement id从1开始。更改以反映情况。

var select = function(i) {
    console.log(i);
};

var arr = ["1", "2", 3, 4, 5, 6];

var start = 0;
var max = 8;

for (var i=1; i<(start + max); i++) {
    if (i === arr.length) {
        break;
    } else {
        (function(i) {
            var element = document.getElementById(['cell', i].join(''));
            element.onclick = function() {
                 select(i);  
            };
        })(i);
    }
}

但是，调用外部函数应该是更快的实现。

Answer 3

我不确定为什么，但这些建议并没有解决我的问题 - 但我设法通过添加到onclicks来找到解决方法，因为我在循环期间显示div，所以我最终做了：

innerHTML = '<Div onclick="">'; //etc etc

而不是将div添加到输出“然后”稍后分配onclicks ...不知道我的新方法是否是最佳选择，但它确实有效，所以我必须坚持下去！

Onclick仅在循环中添加到最后一个元素

3 个答案:

修改