Este artículo describe la solución al hecho de que los eventos registrados en JavaScript usando para lotes de bucle no pueden obtener correctamente los valores de índice. Compártelo para su referencia. El análisis específico es el siguiente:
Muchos amigos pueden encontrar un problema, es decir, cuando se usa un bucle for para registrar la función de procesamiento de eventos, y finalmente obtener el valor de índice del elemento actual a través de la función de procesamiento de eventos, fallará. Veamos primero un ejemplo de código:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<meta name = "autor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
Ancho: 240px;
desbordamiento: oculto;
Texto-Overflow: Ellipsis;
White-Space: Nowrap;
tamaño de fuente: 12px;
Altura: 30px;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var olis = document.getElementsBytagName ("li");
var show = document.getElementById ("show");
for (var index = 0; index <olis.length; index ++) {
olis [index] .Onclick = function () {
show.innerhtml = index;
}
}
}
</script>
</ablo>
<Body>
<div id = "show"> </div>
<ul>
<li> Solo trabajando duro puede haber un mejor mañana. </li>
<li> Compartir y asistencia mutua es la mayor fuerza impulsora para el progreso. </li>
<li> Cada día es nuevo, lo aprecio. </li>
<li> Nadie es un maestro desde el principio, solo trabajando duro puede crecer </li>
<li> Solo el tiempo presente es precioso, el siguiente segundo es ilusorio </li>
</ul>
</body>
</html>
En el código anterior, al hacer clic en el elemento LI, el valor emergente siempre es cuatro. Nuestra idea original es hacer clic en el elemento LI para mostrar el valor de índice del elemento LI actual en el div. Analicemos brevemente las razones a continuación. La razón es muy simple. Después de ejecutar el bucle for For, el valor del índice ha cambiado a cuatro, por lo que ocurre el fenómeno anterior.
El código se modifica de la siguiente manera:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<meta name = "autor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
Ancho: 240px;
desbordamiento: oculto;
Texto-Overflow: Ellipsis;
White-Space: Nowrap;
tamaño de fuente: 12px;
Altura: 30px;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var olis = document.getElementsBytagName ("li");
var show = document.getElementById ("show");
for (var index = 0; index <olis.length; index ++) {
olis [índice] ._ index = index;
olis [index] .Onclick = function () {
show.innerhtml = this._index;
}
}
}
</script>
</ablo>
<Body>
<div id = "show"> </div>
<ul>
<li> Solo trabajando duro puede haber un mejor mañana. </li>
<li> Compartir y asistencia mutua es la mayor fuerza impulsora para el progreso. </li>
<li> Cada día es nuevo, lo aprecio. </li>
<li> Nadie es un maestro desde el principio, solo trabajando duro puede crecer </li>
<li> Solo el tiempo presente es precioso, el siguiente segundo es ilusorio </li>
</ul>
</body>
</html>
El código anterior implementa nuestros requisitos y, por supuesto, también puede usar cierres. El código es el siguiente:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<meta name = "autor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
li {
Ancho: 240px;
desbordamiento: oculto;
Texto-Overflow: Ellipsis;
White-Space: Nowrap;
tamaño de fuente: 12px;
Altura: 30px;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var olis = document.getElementsBytagName ("li");
var show = document.getElementById ("show");
for (var index = 0; index <olis.length; index ++) {
(función (índice) {
olis [index] .Onclick = function () {
show.innerhtml = index;
}
})(índice)
}
}
</script>
</ablo>
<Body>
<div id = "show"> </div>
<ul>
<li> Solo trabajando duro puede haber un mejor mañana. </li>
<li> Compartir y asistencia mutua es la mayor fuerza impulsora para el progreso. </li>
<li> Cada día es nuevo, lo aprecio. </li>
<li> Nadie es un maestro desde el principio, solo trabajando duro puede crecer </li>
<li> Solo el tiempo presente es precioso, el siguiente segundo es ilusorio </li>
</ul>
</body>
</html>
Espero que la descripción en este artículo sea útil para la programación web de todos basada en JavaScript.