迭代時將變量賦值給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); 
}