bizarre problème javascript

Question

J'insère dynamiquement du code html dans le document (en utilisant obj.innerHTML + = 'some html'). Dans ce html, il y a des images avec des identifiants 'imageId_X' (ie imageId_1, imageId_2 ...). Cela fonctionne très bien, mais il y a quelque chose de mal avec le code suivant:

for (var n = 0; n < pConfig.images.length; n++) 
    { 
     document.getElementById('imageId_' + n).onclick = function() 
     { 
      alert(n); 
     } 
    } 

Il y a 4 éléments dans les pConfig.images et d'alerte (n) avertit toujours 4. Pourquoi est-ce qui se passe, ce que je fais mal?

Answer 1

Le problème est que chaque fonction que vous créez a une référence à la même variable n - celle qui est incrémentée. À la fin de la boucle, il est à 4 - et toutes les fonctions que vous avez faites se réfèrent à cette variable avec cette valeur.

Vous pouvez travailler autour d'elle avec une fermeture, .: par exemple

function closure(n) { 
    return function() {alert(n);} 
} 

for (var n = 0; n < pConfig.images.length; n++) 
{ 
    document.getElementById('imageId_' + n).onclick = closure(n); 
} 

Answer 2

La cause de votre problème est l'expression de lamba dans votre code. Lorsque vous définissez votre fonction anonyme en tant que gestionnaire onclick, vous la liez pour la variable externe n, qui à la fin de la boucle est toujours 4 pour la raison pour laquelle vous l'obtenez toujours 4. Pour le faire comme vous l'avez prévu pour effectuer les opérations suivantes:

for (var n = 0; n < pConfig.images.length; n++) 
{ 
    function(n) { 
     document.getElementById('imageId_' + n).onclick = function() 
     { 
     alert(n); 
     } 
    }(n); 
} 

Par conséquent, vous définissez une étendue distincte pour la variable.

Answer 3

Vous avez besoin du fermeture. Voir How do JavaScript closures work?