jQuery 闭包、循环和事件答案

【问题标题】：jQuery Closures, Loops and EventsjQuery 闭包、循环和事件
【发布时间】：2010-09-26 10:41:30
【问题描述】：

我有一个与此处类似的问题：Event handlers inside a Javascript loop - need a closure?，但我使用的是 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 始终是最后一个值，因为我使用循环计数器而不是参数来选择正确的图像。

【问题讨论】：

标签： javascript jquery loops closures

【解决方案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);
);

【讨论】：

【解决方案2】：

Greg 的解决方案仍然有效，但您现在可以通过使用 jQuery click 方法的 eventData 参数（或 bind 或任何其他事件 -绑定方法，就此而言）。

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

看起来更简单，可能更高效（每次迭代少一个闭包）。

bind 方法的文档有关于事件数据的描述和一些示例。

【讨论】：

【解决方案3】：

只要您使用 jQuery 1.4.3 及更高版本，

Nikita 的答案就可以正常工作。对于此之前的版本（回到 1.0），您必须使用 bind，如下所示：

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

希望这可以帮助其他仍在使用 1.4.2 的人（比如我）

【讨论】：