Question

count=1;
for(var i=0;i<5;i++){
   count++;
   $("#ImageProductLeft"+count.toString()).bind('click', function(){
           alert(i);                                                                                                                                    
   });
}

我希望点击ImageProductLeft1显示alert(1)并点击ImageProductLeft2显示alert(2)并...

但是点击所有`ImageProductLeft1 show alert(5)

Answer 1

这有点优雅和灵活：

$("div[id^='ImageProductLeft']").each(function(index) {
    $(this).click(function() {
        alert(index);
    });
});

您可以根据需要添加以ImageProductLeft开头的元素，然后点击任意元素将提醒各自的索引。

Live test case

Answer 2

count=1;
for(var i=0;i<5;i++){
   count++;
   $("#ImageProductLeft"+count.toString()).bind('click', {i: i}, function(event){
         alert(event.data.i);
   });
}

Answer 3

您正在循环（闭包）中创建一个函数。所有变量都将在它们之间共享，i。

最终调用函数时，循环已经完成，i将具有值5。

JavaScript没有块范围。要创建新范围并捕获变量的值，请进行函数调用：

for(var i=0;i<5;i++){
   (function(x) {
       $("#ImageProductLeft"+count.toString()).bind('click', function(){
           alert(x);                                                                                                                                    
       });
   }(i));
}

这里我们使用立即函数来“捕获”i的值。

也就是说，当您使用jQuery时，还有其他更优雅的方法可以解决这个问题，如@scessor's和@Shadow Wizard's答案所示。

然而，重要的是要知道为什么它的工作方式如此，以及如何它可以在“纯粹的”JavaScript中解决。

关闭可能很棘手。我建议看一下JavaScript Closures for Dummies。

Answer 4

for (var i = 1; i<6; i++)
{
    $("#ImageProductLeft" + i.toString()).bind('click', function() {
        alert(i);
    });
}

Answer 5

您遇到此问题是因为您创建的每个事件处理程序中的i指向内存中的相同位置。试试这个：

count=1;
for(var i=0;i<5;i++){
   count++;

   $("#ImageProductLeft"+count.toString()).bind('click', 
       function(x){
           return function() { alert(x); };
       }(i)                                                                                                                                    
   });
}

这是一个相当常见的错误。有关详细说明，请参阅this page

绑定点击控制

5 个答案: