La chaîne ne semble pas être transmise par la valeur

Question

J'utilise la fonction suivante pour lier tous les membres d'une certaine classe à une fonction qui modifie la page en cours. Voici la fonction:

function _bind_menu_items() { 
    var menuItems = fja.getElementsByClass("menuItem"), 
     index, 
     elementID, 
     divIdToBind; 

    for (index in menuItems) { 
     elementID = menuItems[index].id; 
     divIdToBind = elementID.replace("Item", ""); 

     menuItems[index].onclick = function() { 
      fja.menu.changeActivePage(divIdToBind); 
     }; 
    } 
} 

J'ai vérifié que tout fonctionnait comme prévu jusqu'à l'affectation réelle de la propriété onclick. L'erreur que j'obtiens est que chaque div appartenant à la classe menuItem semble appeler la même fonction onclick ... comme si la chaîne divIdToBind est exactement la même pour chaque onclick qui est assigné ... Comment puis-je résoudre ce problème?

Answer 1

Numéro un erreur pour les débutants Javascript. il vous manque que les fonctions anonymes qui se lie à votre gestionnaire onclick, se referme sur son contexte parent. Puisque toutes les fermetures à partir du même contexte parent partagent la même porte la chaîne, toutes ces fonctions feront référence à la dernière valeur qui est passée dans divIdToBind.

Pour résoudre ce problème, la solution de contournement la plus courante est de créer une autre fonction (-Contexte):

menuItems[index].onclick = (function(id) { 
    return function() { 
     fja.menu.changeActivePage(id); 
    }; 
}(divIdToBind)); 

Maintenant, nous faisons créer une autre fonction qui est exécuté immédiatement. Nous le passons dans la valeur de divIdToBind et tout ce qu'il fait est de retourner une autre fonction (juste pour créer un nouveau contexte)