迭代时将变量分配给DOM事件侦听器

Question

我正在考虑这里缺少一些基本的东西；

for (var i=1; i<=5; i++) {
  var o = $('#asd'+i);

  o.mouseover(function() {
    console.info(i);
  });
}

当悬停在五个不同元素上时，我总是从迭代中得出最后一个值；值5。我想要的是不同的值，具体取决于我要悬停的元素，范围从1到5。

我在这里做错了什么？

Answer 1

您需要关闭，因为所有鼠标悬停函数都引用其值正在更改的相同变量：

for (var i=1; i<=5; i++) {
    (function(j) {
        $('#asd'+j).mouseover(function() {
            console.info(j);
        });
    })(i);
}

通过创建闭包，变量j在函数的本地范围内，并且当“外部” i更改时不会更改。

Answer 2

您需要将函数调用包装在更多的闭包中：

参考此：https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures#Creating_closures_in_loops.3a_A_common_mistake

我认为这应该起作用：

for (var i=1; i<=5; i++) {
  var o = $('#asd'+i);
  (function(j){
    o.mouseover(function(){
      console.info(j);
    });
  })(i);
}

Answer 3

在这种情况下，i绑定在每次迭代的闭包内部，这意味着添加到对象的所有函数都指向same变量，并且由于此变量在每次迭代时都递增，因此所有函数都引用最后增加的值。

避免这种情况的方法是将值复制到闭包内部的新变量中

for (var i=1; i<=5; i++) {
     var o = $('#asd'+i);
    (function(newi) {
        o.mouseover(function() {
            console.info(newi);
        });
    }(i);
}