Affectation de variables aux écouteurs d'événements DOM lors de l'itération

Question

Je pense qu'il y a des éléments de base qui me manquent ici;

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

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

Lorsque je survole les cinq éléments différents, je sors toujours la dernière valeur de l'itération; la valeur 5. Ce que je veux, ce sont des valeurs différentes en fonction de quel élément je suis en train de planer, toutes de 1 à 5.

Qu'est-ce que je fais mal ici?

Answer 1

Vous avez besoin d'une fermeture, comme toutes les fonctions de Mouseover font référence à la même variable dont la valeur change:

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

En créant une fermeture, la j variable est à l'intérieur de la portée locale de la fonction et la volonté ne change pas lorsque le "extérieur" change i.

Answer 2

Vous devez envelopper votre fonction appelle en plus de fermetures:

Reportez-vous à cela: https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closures#Creating_closures_in_loops.3a_A_common_mistake

Je pense que cela devrait fonctionner:

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

Answer 3

Dans ce cas i est lié à l'intérieur d'une fermeture à chaque itération, ce qui signifie que toutes les fonctions ajoutées aux objets pointent vers la même variable, et puisque cette variable a été incrémentée à chaque itération, toutes les fonctions se réfèrent à la dernière valeur incrémentée.

La façon d'éviter cela est en copiant la valeur à une nouvelle variable dans la fermeture

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