静的な値を持つループ内の要素を印刷する

Question

JavaScriptとjQueryで作業していて、たくさんのボタンを表示したいと思います。

これらのボタンは、ループ内で増分された変数から名前を取得し、この番号を表示する必要があります。

命名プロセスはうまくいきますが、これらのボタンをクリックすると値10が得られます。この出力の理由はわかりますが、ボタンの実際の数値をどのように得ることができるのか分かりませんボタン名から値を取得する必要はありません）。 「クリック」の値を「静的」にする方法はありますか？ここで

はサンプルコードです：

<script> 
for(var i = 0; i < 10; i++) { 
    $(document.createElement('button')) 
    .html(i) 
    .click(function() { 
     alert(i); 
    }) 
    .appendTo($(document.body)); 
} 
</script> 

Answer 1

クリックイベントがクリックを添付し、あなたがそれらに共通のクラス（例えばcommon）を与えることができることを避けるために、全ての反復に添付されますので、それ

for(var i = 0; i < 10; i++) { 
 
    $(document.createElement('button')) 
 
    .addClass('common') 
 
    .html(i) 
 
    .appendTo($(document.body)); 
 
} 
 

 

 
$('body').on('click', '.common', function(e) { 
 
    console.log($(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

：のようなこのクラスに

これが役立つことを願っています。

Answer 2

あなたは、次の2つの方法であることを達成することができます

1. 単に代わりにvarfor内部ループのES6のletを使用。

for(let i = 0; i < 10; i++) { 
 
    $(document.createElement('button')) 
 
    .html(i) 
 
    .click(function() { 
 
     alert(i); 
 
    }) 
 
    .appendTo($(document.body)); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

次のよう forループ内 IIFE（即時起動可能関数式）を用いて

：

for(var i = 0; i < 10; i++) { 
 
    (function(j){$(document.createElement('button')) 
 
    .html(j) 
 
    .click(function() { 
 
     alert(j); 
 
    }) 
 
    .appendTo($(document.body)); 
 
    })(i); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>