Vor ein paar Tagen, als ich bei der Arbeit Front-End-JS-Code schrieb, stieß ich auf ein Traversalelement und fügte ihm ein Klickereignis hinzu. Es war dieses Problem, das mich den ganzen Nachmittag anpassen ließ. Schließlich ging ich von der Arbeit nach Hause und suchte die Informationen online durch, um herauszufinden, wie ich sie lösen kann. (PS: Ich habe auch den Inhalt von Schleifenbindungsverarbeitungsprogrammen in der vierten Ausgabe von "Jquery Basic Tutorial" gelesen. Ich glaube, ich habe es zu diesem Zeitpunkt nicht sorgfältig gelesen, also habe ich mich nicht daran erinnert.)
Wenn der große Meister diese Art von Situation kennt, kann er das Fenster schließen und diese hauptsächlich für Neulinge wie mich schreiben. Danke!
Lassen Sie uns zuerst die falschen Beispiele veröffentlichen, die alle sehen können. (JQuery wird im Beispiel verwendet. Bitte importieren Sie die Jquery -Bibliothek)
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Schleifenbindungshandler </title>
<script src = "js/jQuery-2.1.1.min.js"> </script>
<script type = "text/javaScript">
$ (function () {
für (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .onclick = function () {
Alarm (i);
}
}
});
</script>
</head>
<body>
<button id = "btn1"> button 1 </button>
<button id = "btn2"> button 2 </button>
<button id = "btn3"> button 3 </button>
<button id = "btn4"> button 4 </button>
</body>
</html>
Nachdem dieser Code ausgeführt wurde, klicken Sie auf die Schaltfläche und die im Popup-Alarm angezeigten Daten werden angezeigt. Ich habe immer gedacht, dass die Tasten 1 bis 4 und die entsprechenden Zahlen im Alarm ebenfalls 1 bis 4 sind. Wenn Sie glauben, Sie liegen falsch.
Klicken Sie auf jede Schaltfläche und die Nummer 4 wird in der Warnung angezeigt. Ich habe es nicht erwartet!
Schreiben Sie jetzt ein paar Lösungen für Ihre Referenz!
Der erste Typ besteht darin, eine Funktion zu schreiben und eine Funktion in dieser Funktion zurückzugeben
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
$ (function () {
für (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .onclick = btnclick (i);
}
});
var btnclick = function (value) {
return function () {
Alarm (Wert);
}
}
</script>
Der zweite Typ: Verwenden Sie den Ausdruck der Anruffunktion sofort
(Funktion (Wert) {
// Codeblock
}) (i) // Dies soll den Funktionsausdruck sofort aufrufen
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
$ (function () {
für (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .onclick = (function (value) {
return function () {
Alarm (Wert);
} })(ich);
}
});
</script>
Der dritte Typ: Jede Funktion mit jQuery
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
$ (function () {
$ .each ([1,2,3,4], Funktion (Index, Wert) {
$ ("#btn"+Wert) .get (0) .onclick = function () {
Alarm (Wert);
}
});
});
</script>
Die Verwendung der oben genannten drei Situationen kann diese Situation am Anfang vermeiden.
Wo GET (0) auf das Konvertieren eines JQuery -Objekts in ein DOM -Objekt bezieht.
Das obige ist mein persönliches Verständnis des Schleifenbindungs -Handlers im JS -Verschluss. Ich werde es mit Ihnen teilen. Ich hoffe, es wird für meine Freunde hilfreich sein.