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)