Hace unos días, cuando escribía el código JS front-end en el trabajo, me encontré con un elemento transversal y le agregué un evento de clic. Fue este problema lo que me hizo ajustarlo toda la tarde. Finalmente, me fui a casa del trabajo de Get Off y busqué la información en línea para averiguar cómo resolverla. (PD: También leí el contenido de los programas de procesamiento vinculante de bucle en la cuarta edición de "JQuery Basic Tutorial". Creo que no lo leí cuidadosamente en ese momento, así que no lo recordaba).
Si el Gran Maestro conoce este tipo de situación, puede cerrar la ventana y escribirlos principalmente para novatos como yo. ¡Gracias!
Publicemos primero los ejemplos equivocados para que todos lo vean. (JQuery se usa en el ejemplo, importe la biblioteca jQuery)
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Handler de enlace de bucle </title>
<script src = "js/jQuery-2.1.1.min.js"> </script>
<script type = "text/javaScript">
$ (function () {
para (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .Onclick = function () {
alerta (i);
}
}
});
</script>
</ablo>
<Body>
<botón id = "btn1"> botón 1 </botón>
<botón id = "btn2"> botón 2 </botón>
<botón id = "btn3"> botón 3 </botón>
<botón id = "btn4"> botón 4 </botón>
</body>
</html>
Después de ejecutar este código, haga clic en el botón y se muestran los datos que se muestran en la alerta emergente. Siempre he pensado que los botones del 1 al 4, y los números correspondientes en la alerta también son de 1 a 4. Si crees que sí, estás equivocado.
Haga clic en cada botón y se muestra el número 4 en la alerta. ¡No lo esperaba!
¡Ahora escriba algunas soluciones para su referencia!
El primer tipo es escribir una función y devolver una función en esta función
La copia del código es la siguiente:
<script type = "text/javaScript">
$ (function () {
para (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .Onclick = btnclick (i);
}
});
var btnClick = function (valor) {
Función de retorno () {
alerta (valor);
}
}
</script>
El segundo tipo: use la expresión de la función de llamada inmediatamente
(función (valor) {
// bloque de código
}) (i) // Esto es para llamar a la expresión de la función inmediatamente
La copia del código es la siguiente:
<script type = "text/javaScript">
$ (function () {
para (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .Onclick = (function (valor) {
Función de retorno () {
alerta (valor);
} })(i);
}
});
</script>
El tercer tipo: cada función usando jQuery
La copia del código es la siguiente:
<script type = "text/javaScript">
$ (function () {
$ .each ([1,2,3,4], función (índice, valor) {
$ ("#btn"+valor) .get (0) .Onclick = function () {
alerta (valor);
}
});
});
</script>
El uso de las tres situaciones anteriores puede evitar esa situación al principio.
donde get (0) se refiere a convertir un objeto jQuery en un objeto DOM.
Lo anterior es mi comprensión personal del manejador de encuadernación de bucle en el cierre de JS. Lo compartiré contigo. Espero que sea útil para mis amigos.