javascript - jquery click 函数总是返回最大值

Question

我将元素插入到 DOM 中，之后我想将点击函数绑定到这些元素。这可行，但由于某种原因，创建的链接都返回相同的值，这是循环后“px_amount”的最大值。很奇怪:) 第一个console.log(); 确实返回正确的值，我可以看到它在每次迭代后递增。为了简单起见，我在 click 函数中添加了一个简单的 console.log()。

for(var i=1; i<=bullet_amount; i++)
{               
    $('<a id="bullet-'+i+'">'+i+' </a>').appendTo('#bullet-nav');

    px_amount = (i-1)*ratio*3450;
    console.log(px_amount);
    $("#bullet-"+i).live('click', function() {
        console.log(px_amount);
    });
}

Answer 1

这是一个非常常见的问题：i所有回调的变量都是相同的，即封闭范围之一。

一个常见的解决方案是：

for(var i=1; i<=bullet_amount; i++)
{               
    (function(i){
      $('<a id="bullet-'+i+'">'+i+' </a>').appendTo('#bullet-nav');
      px_amount = (i-1)*ratio*3450;
      console.log(px_amount);
      $("#bullet-"+i).live('click', function() {
         console.log(px_amount);
      });
    })(i);
}

Answer 2

您应该使用闭包来捕获rether的值而不是reference：i

for(var i=1; i<=bullet_amount; i++) {
    (function(iVal) {
        $('<a id="bullet-'+iVal+'">'+iVal+' </a>').appendTo('#bullet-nav');

        var px_amount = (iVal-1)*ratio*3450;
        console.log(px_amount);
        $("#bullet-"+iVal).live('click', function() {
            console.log(px_amount);
        });
    })(i);
}