Comment accéder correctement aux variables externes dans les boucles à l'aide des fermetures JavaScript et jQuery ?

Accès aux variables externes dans les boucles via des fermetures JavaScript

En JavaScript, la manipulation des variables dans les fermetures et les boucles peut présenter des défis. Cet article traite d'un problème courant où l'accès aux variables dans une boucle entraîne des valeurs inattendues en raison de la portée de la variable.

Considérez l'extrait de code suivant :

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
}</code>

Lorsque vous cliquez sur l'un des boutons créés par la boucle, la fonction d'alerte affiche toujours l'ID du dernier élément du tableau. Cela se produit parce que l'élément variable change à chaque itération et qu'au moment où l'événement de clic est déclenché, il fait référence au dernier élément.

Pour résoudre ce problème, nous pouvons utiliser des fermetures. Les fermetures sont des fonctions qui renvoient d'autres fonctions et sont souvent utilisées pour créer des étendues localisées pour les variables. En modifiant le code, nous pouvons encapsuler l'élément variable dans une fermeture :

<code class="javascript">for (var i in this.items) {
    var item = this.items[i];
    // ...
    $("#showcasebutton_" + item.id).click(
        (function(item) {
             return function() {
                alert(item.id);
                self.switchto(item.id);
             };
        })(item)
    );
}</code>

Dans la fonction interne, l'élément variable est capturé en tant que paramètre, créant ainsi une portée localisée. Cela garantit que lorsque l'événement de clic est déclenché, il accédera à l'objet d'élément correct associé à ce bouton.

Alternativement, vous pouvez tirer parti de la fonction d'assistance $.each() de jQuery, qui simplifie le processus d'itération et de portée variable. :

<code class="javascript">$.each(this.items,function(i, item) {
    // ...
    $("#showcasebutton_" + item.id).click(function() {
        alert(item.id);
        self.switchto(item.id);
    });
});</code>

Dans ce cas, l'élément est passé en paramètre à la fonction, garantissant la portée appropriée et résolvant le problème initial.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!