JQuery замыкания, циклы и события

Question

У меня есть вопрос, похожий на тот, что здесь: Обработчики событий внутри цикла Javascript - нужно закрытие? , но я использую jQuery, и данное решение вызывает событие, когда оно связано, а не по клику.

Вот мой код:

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);   
          }
     }
}

Я попробовал несколько разных способов без успеха ...

Первоначальная проблема заключалась в том, что _this.Indicator.TrueImage всегда был последним значением, потому что я использовал счетчики циклов, а не параметры, чтобы выбрать правильное изображение.

Answer 1

Вам не хватает функции. Для функции .click нужна функция в качестве параметра, поэтому вам нужно сделать следующее:

.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

Решение по Грег все еще действует, но вы можете сделать это сейчас, не создавая дополнительного закрытия, используя eventData параметр jQuery click method (или bind *) 1007 * или любой другой метод привязки к событию, в этом отношении).

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

Выглядит гораздо проще и, вероятно, более эффективно (на одну итерацию меньше замыкания).

Документация для метода bind содержит описание и некоторые примеры данных событий.

Answer 3

Никита ответ работает нормально, если вы используете jQuery 1.4.3 и новее. Для версий, предшествующих этому (обратно к 1.0), вам придется использовать bind следующим образом:

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

Надеюсь, это поможет кому-нибудь еще, все еще использующему 1.4.2 (как я)