Eine kurze Diskussion über den Schleifenbindungshandler in JS-Closure_Grundkenntnisse

Als ich vor ein paar Tagen bei der Arbeit Front-End-JS-Code schrieb, stieß ich auf das Problem, Elemente zu durchlaufen und ihnen Klickereignisse hinzuzufügen. Es war diese Frage, die mich einen ganzen Nachmittag lang beschäftigte. Am Ende ging ich von der Arbeit nach Hause und suchte online nach Informationen, um herauszufinden, wie ich das Problem lösen kann. (PS: Ich habe auch bereits in der vierten Ausgabe des „JQuery Basics Tutorial“ über Loop-Binding-Handler gelesen. Ich habe dem damals wahrscheinlich nicht viel Aufmerksamkeit geschenkt, also konnte ich mich nicht daran erinnern.)
Wenn der Meister von einer solchen Situation weiß, können Sie das Fenster schließen. Ich schreibe dies hauptsächlich für Anfänger wie mich. Danke!

Veröffentlichen Sie zunächst ein Beispiel für den Fehler, damit jeder es sehen kann. (Im Beispiel wird jQuery verwendet, bitte importieren Sie die jQuery-Bibliothek)

Code kopieren Der Code lautet wie folgt:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml"> ​ ​ ​ ​ ​Button 1 ​Button 2 ​Button 3 ​Button 4


Nachdem dieser Code ausgeführt wurde, klicken Sie auf die Schaltfläche und die Anzahl der in der Popup-Benachrichtigung angezeigten Daten wird angezeigt. Ich dachte immer, dass die Schaltflächen 1 bis 4 den Zahlen in der Warnung von 1 bis 4 entsprechen würden. Wenn Sie das glauben, liegen Sie falsch.
Wenn Sie auf jede Schaltfläche klicken, wird die Nummer 4 in der Warnung angezeigt. Das habe ich nicht erwartet!
Jetzt werde ich einige Lösungen als Referenz aufschreiben!
Die erste Methode besteht darin, eine Funktion zu schreiben und eine Funktion in dieser Funktion zurückzugeben





Code kopieren


Der Code lautet wie folgt:

Die zweite Methode besteht darin, den Funktionsausdruck für den sofortigen Aufruf
zu verwenden ​(Funktion(Wert){
​​//Codeblock
})(i)//Dies ist der Ausdruck, um die Funktion sofort aufzurufen

Code kopieren


Der Code lautet wie folgt:

Die dritte Methode besteht darin, die Funktion „each“ von jQuery zu verwenden