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在每次迭代时都绑定在一个闭包内，这意味着添加到对象的所有函数都指向相同的变量，并且因为这个变量在每个变量上递增迭代所有函数都是指最后一个递增的值。

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

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

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

3 个答案: