javascript - style - jQuery Cierres, bucles y eventos

infowindow google maps

Question

Tengo una pregunta similar a la siguiente: los controladores de eventos dentro de un bucle de Javascript necesitan un cierre. pero estoy usando jQuery y la solución dada parece activar el evento cuando está vinculado en lugar de hacer clic.

Aquí está mi código:

for(var i in DisplayGlobals.Indicators)
{
var div = d.createElement("div");
div.style.width = "100%";
td.appendChild(div);
for(var j = 0;j<3;j++)
{
var test = j;
if(DisplayGlobals.Indicators[i][j].length > 0)
{
var img = d.createElement("img");
jQuery(img).attr({
src : DisplayGlobals.Indicators[i][j],
alt : i,
className: "IndicatorImage"
}).click(
function(indGroup,indValue){
jQuery(".IndicatorImage").removeClass("active");
_this.Indicator.TrueImage = DisplayGlobals.Indicators[indGroup][indValue];
_this.Indicator.FalseImage = DisplayGlobals.IndicatorsSpecial["BlankSmall"];
jQuery(this).addClass("active");
}(i,j)
);
div.appendChild(img);
}
}
}

He intentado un par de formas diferentes sin éxito ...

El problema original era que _the.Indicator.TrueImage era siempre el último valor porque estaba usando los contadores de bucle en lugar de los parámetros para elegir la imagen correcta.

Answer 1

Te estás perdiendo una función. La función .click necesita una función como parámetro, por lo que debe hacer esto:

.click(
function(indGroup,indValue)
{
return function()
{
jQuery(".IndicatorImage").removeClass("active");
_this.Indicator.TrueImage = DisplayGlobals.Indicators[indGroup][indValue];
_this.Indicator.FalseImage = DisplayGlobals.IndicatorsSpecial["BlankSmall"];
jQuery(this).addClass("active");
}
}(i,j);
);

Answer 2

La solución de Greg sigue siendo válida, pero puede hacerlo sin crear un cierre adicional ahora, utilizando el parámetro eventData del método de clic jQuery (o enlace o cualquier otro método de vinculación de eventos, para el caso).

.click({indGroup: i, indValue : j}, function(event) {
alert(event.data.indGroup);
alert(event.data.indValue);
...
});

Parece mucho más simple y probablemente más eficiente (un cierre menos por iteración).

La documentación del método bind tiene una descripción y algunos ejemplos sobre los datos del evento.

Answer 3

La respuesta de Nikita funciona bien siempre que uses jQuery 1.4.3 y posterior. Para las versiones anteriores a esto (de vuelta a la versión 1.0), deberá usar bind de la siguiente manera:

.bind(''click'', {indGroup: i, indValue : j}, function(event) {
alert(event.data.indGroup);
alert(event.data.indValue);
...
});

Espero que esto ayude a cualquier otra persona que todavía esté usando 1.4.2 (como yo)