Wie greife ich mithilfe von JavaScript-Closures und jQuery korrekt in Schleifen auf externe Variablen zu?

Zugriff auf externe Variablen in Schleifen über JavaScript-Abschlüsse

In JavaScript kann die Manipulation von Variablen innerhalb von Abschlüssen und Schleifen eine Herausforderung darstellen. Dieser Artikel befasst sich mit einem häufigen Problem, bei dem der Zugriff auf Variablen in einer Schleife aufgrund des Variablenbereichs zu unerwarteten Werten führt.

Beachten Sie den folgenden Codeausschnitt:

<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>

Wenn Sie auf eine der von erstellten Schaltflächen klicken In der Schleife zeigt die Alarmfunktion immer die ID des letzten Elements im Array an. Dies liegt daran, dass sich das variable Element bei jeder Iteration ändert und sich zum Zeitpunkt der Auslösung des Klickereignisses auf das letzte Element bezieht.

Um dieses Problem zu lösen, können wir Schließungen verwenden. Abschlüsse sind Funktionen, die andere Funktionen zurückgeben und häufig zum Erstellen lokalisierter Bereiche für Variablen verwendet werden. Durch Ändern des Codes können wir das variable Element in einem Abschluss einkapseln:

<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>

Innerhalb der inneren Funktion wird das variable Element als Parameter erfasst, wodurch effektiv ein lokalisierter Bereich erstellt wird. Dadurch wird sichergestellt, dass beim Auslösen des Klickereignisses auf das richtige Elementobjekt zugegriffen wird, das dieser Schaltfläche zugeordnet ist.

Alternativ können Sie die $.each()-Hilfsfunktion von jQuery nutzen, die den Iterations- und Variablen-Scoping-Prozess vereinfacht :

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

In diesem Fall wird item als Parameter an die Funktion übergeben, um den richtigen Umfang sicherzustellen und das ursprüngliche Problem zu lösen.

Das obige ist der detaillierte Inhalt vonWie greife ich mithilfe von JavaScript-Closures und jQuery korrekt in Schleifen auf externe Variablen zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!