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); };
}

すべての詳細は複製で説明されています。