jquery - jquery .click-event 没有像预期的那样使用计数器变量

Question

我有类似初学者的问题，因为 javascript 以一种意想不到的方式使用了变量 'i'：

for(var i=0; i<3;i++){
    $("a[href=#markers"+i+"]").click(function() {
        console.info(this);
        console.info("click: "+i);
    });
}

这是我的控制台：

<a href="#markers0">
click: 3
<a href="#markers1">
click: 3
<a href="#markers1">
click: 3

但我想要这个：

<a href="#markers0">
click: 0
<a href="#markers1">
click: 1
<a href="#markers1">
click: 2

有人可以帮助解决这个问题吗？谢谢！

Answer 1

循环将继续增加i变量，而与您单击的任何内容无关。

为什么不只针对所有具有以 开头的 href 的元素，#markers然后从 href 中获取数字，如下所示：

$('a[href^="#markers"]').on('click', function() {
     var i = $(this).attr('href').replace('#markers','');
     console.log("click: "+i);
});​

小提琴

或者，如果出于某种奇怪的原因您需要循环，您始终可以将变量存储在 data() 中：

for(var i=0; i<3;i++){
    $("a[href=#markers"+i+"]").data('i',i).click(function() {
        console.info(this);
        console.info("click: "+$(this).data('i'));
    });
}​

小提琴

Answer 2

这可以在闭包的帮助下解决。在您的情况下，单击事件只是被分配了变量 i ..但是当您单击链接时， i 的值设置为 3，因为它们都指向相同的内存地点..

使用闭包解决了这里的问题，因为函数是针对 i.. 的当前值执行的。试试这个

for(var i=0; i<3;i++){
  (function(num){
       return  $("a[href=#markers"+num+"]").click(function() {
                  console.info(this);
                  console.info("click: "+num);
               });
   })(i)
}

检查小提琴

Answer 3

无需为每个链接创建单独的点击处理程序，或单独选择每个链接。
此外，其他答案仅适用于一组预定义的链接（0..2）。
我的版本使用单个选择器、单个处理程序，并适用于任意数量的链接。
即使它们之间有孔。

// all of the #markers* href elements
var links = $("a[href^=#markers]");

// common click handler
links.click(function () {
    // get the number from the href
    var num = parseInt($(this).attr("href").substr(8), 10);    
    console.log("click", num);
});

在这里演示小提琴。