Drei Lösungen für Unterfunktionen, die auf externe Variablen in JavaScript zugreifen

Vorwort

Wenn wir Webseiten schreiben, stoßen wir sicherlich häufig auf die folgende Situation:

<Text>
  
<div Klasse="btns-wrapper"></div>
  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Skript>
var Wrapper = $('.btns-Wrapper');
für(var i = 0; i < 5; i++){
 var btn = $('<button>Button' + i + '</button>').appendTo(wrapper);
 btn.on('klicken', Funktion(evt){
  console.log('Klicken Sie auf die Schaltfläche: ' + i);
 });
}
</Skript>
  
</body>

Der Code ist sehr einfach. Erstellen Sie einfach ein paar Schaltflächen auf der Seite und definieren Sie die Schaltflächenklickereignisse.

Wenn wir jedoch auf die Schaltfläche klicken, stellen wir fest, dass die erhaltene Seriennummer immer 5 ist, was der letzte Wert von i ist.

Dies liegt daran, dass die zum Definieren des Klickereignisses verwendete anonyme Funktion auf dieselbe Variable, d. h., verweist.

Lösung 1: Sofort ausführen

var Wrapper = $('.btns-Wrapper');
für(var i = 0; i < 5; i++){
 var btn = $('<button>Button' + i + '</button>').appendTo(wrapper);

 //Standardmethode //btn.on('click', function(evt){
 // console.log('Klicken Sie auf die Schaltfläche: ' + i);
 //});

 //Methode 1: Sofort ausführen btn.on('click', (function(n){
  Rückgabefunktion (evt) {
   console.log('Klicken Sie auf die Schaltfläche: ' + n);
  }
 })(ich));

}

Dieser Ansatz besteht darin, für jede Schaltfläche direkt bei der Definition des Ereignisses eine separate anonyme Funktion (Closure) zu erstellen, und jede Funktion enthält die richtige i-Variable.

Lösung 2: Verwenden Sie die jQuery-Ereignisübergabe

var Wrapper = $('.btns-Wrapper');
für(var i = 0; i < 5; i++){
 var btn = $('<button>Button' + i + '</button>').appendTo(wrapper);

 //Standardmethode //btn.on('click', function(evt){
 // console.log('Klicken Sie auf die Schaltfläche: ' + i);
 //});

 //Methode 2: Verwenden Sie den JQuery-Ereignisparameter btn.on('click', { i: i }, function(evt){
  console.log('Klicken Sie auf die Schaltfläche: ' + evt.data.i);
 });

}

Diese Methode ist viel einfacher. Sie können einfach jQuery verwenden, um den Parameterkörper an die anonyme Funktion zu übergeben.

Lösung 3: Verwenden Sie das Datenattribut von DOM

var Wrapper = $('.btns-Wrapper');
für(var i = 0; i < 5; i++){
 var btn = $('<button>Button' + i + '</button>').appendTo(wrapper);

 //Standardmethode //btn.on('click', function(evt){
 // console.log('Klicken Sie auf die Schaltfläche: ' + i);
 //});

 //Methode 3: Verwenden des Datenattributs von DOM btn.data('i', i);
 btn.on('klicken', Funktion(evt){
  console.log('Klicken Sie auf die Schaltfläche:' + $(this).data('i'));
 });

}

Auch diese Methode ist sehr einfach, hat jedoch den Nachteil, dass es nicht möglich ist, mit dem Datenattribut strukturierte Daten zu definieren.

Zusammenfassen

Im Großen und Ganzen ist die Verwendung von Ereignisparametern zum Übertragen von Variablen in einer jQuery-Umgebung am einfachsten und es können strukturierte Daten übergeben werden.

Andernfalls ist dies nur durch eine sofortige Vollstreckung (Schließung) möglich.

Dies ist das Ende dieses Artikels darüber, wie Unterfunktionen in JavaScript auf externe Variablen zugreifen. Weitere Informationen darüber, wie Unterfunktionen in JavaScript auf externe Variablen zugreifen, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!