7

可能重复：
在 for 循环中分配点击处理程序

我需要有关代码中循环的帮助。

我遍历一个数组并添加对 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 idcell7获得了点击添加，但 div idcell0没有cell6。我猜这与i循环中的变化有关，因此也会影响i函数中的变化？

我该如何解决这个问题？

4

3 回答 3

4

你很接近：

(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>
于 2012-10-09T03:45:46.537 回答
2

试试这个例子。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);
    }
}

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

于 2012-10-09T03:59:06.237 回答
1

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

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

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

于 2012-10-09T04:12:16.997 回答