javascript - 如何调用父变量 i++

Question

我在一个页面上有多个按钮，并希望它们执行类似的任务。在 PHP 中我可以做到这一点，但在 JavaScript 中我似乎无法让它工作：

for (i= 0; i<5; i++){
  $("#btn_"+i).click(function(){
    alert(i);                                 
  });
}

警报始终为5

我的PHP 解决方案运行良好，但我想减少页面上编写的代码......

<?php
for ($i= 0; $i<5; $i++){
?>

  $("#btn_page-<?php print $i; ?>").click(function(){
    $("#btn_"+i).click(function(){
      alert("<?php print $i; ?>");                                 
    });

<?php
}
?>

Answer 1

为此，您需要闭包。您也可以使用 jQuery 在事件数据中传递引用：

for(i = 0; i < 5; i++) {
    $("#btn_"+i).click({ counter: i }, function(e) {
        alert(e.data.counter);                                 
    });
}

这是一个jsFiddle。

Answer 2

不是您的循环问题的答案，但您可以尝试这种方法而不是循环：

$('[id^="btn_"]').click( function(e) {
    alert(this.id.replace("btn_",""));                                 
});

样本

Answer 3

这是众所周知的for 循环问题。您需要将代码封装在一个自动执行的闭包中。

$("#btn_" + i).click(function(i) {
     return function() {
         alert(i);
     };
}(i));

或者您可以将执行回调放入参数中，如下所示：

$("#btn_" + i).click(callback(i));

function callback(i) {
    return function() { alert(i); };
}

所有细节都在副本中解释。