hacer - javascript y jquery pdf

El controlador JavaScript Click no funciona como se esperaba dentro de un bucle for

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo funcionan los cierres de JavaScript? 88 respuestas

Estoy tratando de aprender JS y tengo un problema.

Intenté muchas cosas y busqué en Google, pero todo fue en vano. La siguiente pieza de código no funciona como se esperaba. Debería obtener un valor de i en el clic pero siempre devuelve 6. Me estoy quitando el pelo. Por favor, ayuda.

for (var i = 1; i < 6; i++) {
console.log(i);
$("#div" + i).click(
function() {
alert(i);
}
);
}

jsfiddle

Answer 1

El problema es que a medida que iteras por el ciclo, i se incrementa. Termina con un valor de 6. Cuando dice alert(i) está pidiendo javascript que le diga cuál es el valor de i en el momento en que se hace clic en el enlace , que para ese punto es 6.

Si desea obtener el contenido de la caja en su lugar, podría hacer algo como esto:

for (var i = 1; i < 6; i++) {
console.log(i);
$("#div" + i).click(function(e) {
alert($(this).text());
});
}

Ejemplo de trabajo: http://jsfiddle.net/rmXcF/2/

Answer 2

DEMO de trabajo

Este es un problema clásico de cierre de JavaScript. La referencia al objeto i se está almacenando en el cierre del manejador de clics, en lugar del valor real de i .

Cada controlador de un solo clic se referirá al mismo objeto porque solo hay un objeto contador que contiene 6, por lo que obtendrá seis en cada clic.

La solución consiste en envolver esto en una función anónima y pasarlo como argumento. Las primitivas se copian por valor en las llamadas a funciones.

for(var i=1; i<6; i++) {
(function (i) {
$("#div" + i).click(
function () { alert(i); }
);
})(i);
}

ACTUALIZAR

DEMO actualizada

O puede usar ''let'' lugar de var para declarar i . let un enlace fresco cada vez. Solo se puede usar en el strict mode ECMAScript 6.

''use strict'';
for(let i=1; i<6; i++) {
$("#div" + i).click(
function () { alert(i); }
);
}

Answer 3

$("#div" + i).click(
function() {
alert(i);
}
);

Es porque está usando el valor de i como cierre. i recuerda a través de un cierre que aumenta en cada etapa del ciclo foor.

$("#div" + i).click(function(event) {
alert($(event.target).attr("id").replace(/div/g, ""));
});