迭代时将变量赋值给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是一个封闭的内部约束在每次迭代中，意味着添加到对象的所有函数都指向相同的变量，并且由于此变量在每次迭代时都增加，所有函数都引用最后递增的值。

避免这个问题的方法是通过值复制到一个新的变量瓶盖内

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