Cet article décrit la solution au fait que les événements enregistrés dans JavaScript à l'aide du lot de boucle ne peuvent pas obtenir correctement les valeurs d'index. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
De nombreux amis peuvent rencontrer un problème, c'est-à-dire que lorsque vous utilisez une boucle pour une boucle pour enregistrer la fonction de traitement des événements, puis finalement obtenir la valeur d'index de l'élément actuel via la fonction de traitement des événements, il échouera. Regardons d'abord un exemple de code:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<meta name = "auteur" content = "// www.vevb.com/" />
<Title> Wulin.com </TITME>
<style type = "text / css">
li {
Largeur: 240px;
débordement: caché;
Text-overflow: ellipsis;
Espace blanc: Nowrap;
taille de police: 12px;
hauteur: 30px;
}
</ style>
<script type = "text / javascript">
window.onload = function () {
var olis = document.getElementsByTagName ("li");
var show = document.getElementById ("show");
pour (var index = 0; index <olis.length; index ++) {
olis [index] .onclick = function () {
show.innerhtml = index;
}
}
}
</cript>
</ head>
<body>
<div id = "show"> </ div>
<ul>
<li> Ce n'est qu'en travaillant dur pour qu'il y ait mieux demain. </li>
<li> Le partage et l'assistance mutuelle sont le plus grand moteur du progrès. </li>
<li> Chaque jour est nouveau, chérissez-le. </li>
<li> Personne n'est un maître depuis le début, ce n'est qu'en travaillant dur que vous pouvez grandir </li>
<li> Seul le temps actuel est précieux, la seconde suivante est illusoire </li>
</ul>
</docy>
</html>
Dans le code ci-dessus, en cliquant sur l'élément Li, la valeur pop-up est toujours quatre. Notre idée originale est de cliquer sur l'élément Li pour afficher la valeur d'index de l'élément LI actuel dans la div. Analyons brièvement les raisons ci-dessous. La raison est très simple. Une fois la boucle FOR exécutée, la valeur d'index est passée à quatre, donc le phénomène ci-dessus se produit.
Le code est modifié comme suit:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<meta name = "auteur" content = "// www.vevb.com/" />
<Title> Wulin.com </TITME>
<style type = "text / css">
li {
Largeur: 240px;
débordement: caché;
Text-overflow: ellipsis;
Espace blanc: Nowrap;
taille de police: 12px;
hauteur: 30px;
}
</ style>
<script type = "text / javascript">
window.onload = function () {
var olis = document.getElementsByTagName ("li");
var show = document.getElementById ("show");
pour (var index = 0; index <olis.length; index ++) {
olis [index] ._ index = index;
olis [index] .onclick = function () {
show.innerhtml = this._index;
}
}
}
</cript>
</ head>
<body>
<div id = "show"> </ div>
<ul>
<li> Ce n'est qu'en travaillant dur pour qu'il y ait mieux demain. </li>
<li> Le partage et l'assistance mutuelle sont le plus grand moteur du progrès. </li>
<li> Chaque jour est nouveau, chérissez-le. </li>
<li> Personne n'est un maître depuis le début, ce n'est qu'en travaillant dur que vous pouvez grandir </li>
<li> Seul le temps actuel est précieux, la seconde suivante est illusoire </li>
</ul>
</docy>
</html>
Le code ci-dessus implémente nos exigences et, bien sûr, vous pouvez également utiliser des fermetures. Le code est le suivant:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<meta name = "auteur" content = "// www.vevb.com/" />
<Title> Wulin.com </TITME>
<style type = "text / css">
li {
Largeur: 240px;
débordement: caché;
Text-overflow: ellipsis;
Espace blanc: Nowrap;
taille de police: 12px;
hauteur: 30px;
}
</ style>
<script type = "text / javascript">
window.onload = function () {
var olis = document.getElementsByTagName ("li");
var show = document.getElementById ("show");
pour (var index = 0; index <olis.length; index ++) {
(fonction (index) {
olis [index] .onclick = function () {
show.innerhtml = index;
}
})(indice)
}
}
</cript>
</ head>
<body>
<div id = "show"> </ div>
<ul>
<li> Ce n'est qu'en travaillant dur pour qu'il y ait mieux demain. </li>
<li> Le partage et l'assistance mutuelle sont le plus grand moteur du progrès. </li>
<li> Chaque jour est nouveau, chérissez-le. </li>
<li> Personne n'est un maître depuis le début, ce n'est qu'en travaillant dur que vous pouvez grandir </li>
<li> Seul le temps actuel est précieux, la seconde suivante est illusoire </li>
</ul>
</docy>
</html>
J'espère que la description de cet article sera utile à la programmation Web de chacun basée sur JavaScript.