Il y a quelques jours, lorsque j'écrivais le code JS frontal au travail, j'ai rencontré un élément de traversée et ajouté un événement de clic. C'est ce problème qui m'a fait ajuster tout l'après-midi. Enfin, je suis rentré chez moi de Get Off Work et j'ai fouillé les informations en ligne pour savoir comment la résoudre. (PS: J'ai également lu le contenu des programmes de traitement de liaison Loop dans la quatrième édition de "JQuery Basic Tutorial". Je suppose que je ne l'ai pas lu attentivement à l'époque, donc je ne m'en souvenais pas.)
Si le grand maître connaît ce genre de situation, il peut fermer la fenêtre et les écrire principalement pour les débutants comme moi. Merci!
Postons d'abord les mauvais exemples pour que tout le monde puisse le voir. (JQuery est utilisé dans l'exemple, veuillez importer la bibliothèque jQuery)
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Loop Binding Handler </Title>
<script src = "js / jQuery-2.1.1.min.js"> </ script>
<script type = "text / javascript">
$ (function () {
pour (var i = 1; i <= 4; i ++) {
$ ("# btn" + i) .get (0) .OnClick = function () {
alerte (i);
}
}
});
</cript>
</ head>
<body>
<Button ID = "BTN1"> Button 1 </futton>
<Button id = "btn2"> Button 2 </futton>
<Button id = "btn3"> Button 3 </futton>
<Button ID = "BTN4"> Button 4 </futton>
</docy>
</html>
Une fois ce code exécuté, cliquez sur le bouton et les données affichées dans l'alerte contextuelle s'affichent. J'ai toujours pensé que les boutons 1 à 4, et les nombres correspondants dans l'alerte sont également 1 à 4. Si vous le pensez, vous vous trompez.
Cliquez sur chaque bouton et le numéro 4 s'affiche dans l'alerte. Je ne m'y attendais pas!
Maintenant, écrivez quelques solutions pour votre référence!
Le premier type consiste à écrire une fonction et à renvoyer une fonction dans cette fonction
La copie de code est la suivante:
<script type = "text / javascript">
$ (function () {
pour (var i = 1; i <= 4; i ++) {
$ ("# btn" + i) .get (0) .OnClick = btnClick (i);
}
});
var btnclick = fonction (valeur) {
return function () {
alerte (valeur);
}
}
</cript>
Le deuxième type: utilisez immédiatement l'expression de la fonction d'appel
(fonction (valeur) {
// Bloc de code
}) (i) // c'est pour appeler immédiatement l'expression de la fonction
La copie de code est la suivante:
<script type = "text / javascript">
$ (function () {
pour (var i = 1; i <= 4; i ++) {
$ ("# btn" + i) .get (0) .OnClick = (fonction (valeur) {
return function () {
alerte (valeur);
} })(je);
}
});
</cript>
Le troisième type: chaque fonction utilisant jQuery
La copie de code est la suivante:
<script type = "text / javascript">
$ (function () {
$ .each ([1,2,3,4], fonction (index, valeur) {
$ ("# btn" + valeur) .get (0) .OnClick = function () {
alerte (valeur);
}
});
});
</cript>
L'utilisation des trois situations ci-dessus peut éviter cette situation au début.
où GET (0) fait référence à la conversion d'un objet jQuery en un objet DOM.
Ce qui précède est ma compréhension personnelle du gestionnaire de liaison en boucle dans la fermeture de JS. Je vais le partager avec vous. J'espère que ce sera utile à mes amis.