jquery 将单击绑定到控件

qqrboqgw  于 2022-12-12  发布在  jQuery
关注(0)|答案(5)|浏览(145)
count=1;
for(var i=0;i<5;i++){
   count++;
   $("#ImageProductLeft"+count.toString()).bind('click', function(){
           alert(i);                                                                                                                                    
   });
}

我希望在单击ImageProductLeft1时显示alert(1),单击ImageProductLeft2时显示alert(2),然后...
但是onclick在所有ImageProductLeft1上都显示alert(5)

wfypjpf4

wfypjpf41#

这是更优雅和灵活一点:

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

ImageProductLeft开头的元素数量不限,单击任何一个元素都会提醒它们各自的索引。
Live test case

xoefb8l8

xoefb8l82#

你正在一个循环中创建一个函数(闭包)。所有的变量都将在它们之间共享,也包括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和@ ShadowWizard的答案所示。
尽管如此,了解 * 为什么 * 它是这样工作的以及 * 如何 * 在“纯”JavaScript中解决它是很重要的。
闭包可能很棘手。我建议看一下JavaScript Closures for Dummies

ryhaxcpt

ryhaxcpt3#

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

iyr7buue4#

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

gkn4icbw5#

您遇到这个问题是因为您创建的每个事件处理程序中的i都指向内存中的同一个位置。请尝试使用以下代码:

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

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

这是一个相当常见的错误。请参阅此页以获得进一步的解释

相关问题