ループ生成要素のonclick関数に値を渡す

Question

生成されたリンクのパラメータ（文字列から結果セットへの文字列）をonClick関数に渡したいとします。

for (var i=0; i<response.data.length; i++){ 
     var attend= document.createElement("a"); 
     var name = response.data[i].name; 
     attend.innerHTML="Add event"; 
     attend.addEventListener("click", function() {saveEvent(name);}, false); 
     document.getElementsByClassName("event")[i].appendChild(attend); 
} 

これは私がいつも私がクリック方リンク最後の要素名を取得し、その結果：

は、今のところ私は、これは持っています。

Answer 1

これは、name変数の周りにクロージャが作成されているためです。これにより、変数が保持するデータがすべてのイベントハンドラ関数で共有されます。最後の要素のnameが常に表示されている理由は、ループが終了したときに最後に値が格納されていたためです。

ループの繰り返しごとにそのデータのコピーを渡す必要があります。変数の宣言にvarの代わりにletを使用するコードを変更して、ループの各繰り返しでnameが独自の有効範囲を持つようにします。

クローズは、頭をかぶってしまうトリッキーな概念です。あなたはそれらの詳細を読むことができますhere。

for (var i=0; i<response.data.length; i++){ 
     var attend= document.createElement("a"); 
     let name = response.data[i].name; 
     attend.innerHTML="Add event"; 
     attend.addEventListener("click", function() {saveEvent(name);}, false); 
     document.getElementsByClassName("event")[i].appendChild(attend); 
} 

さらに、DOMを変更することは、パフォーマンス面ではすでに高価な操作です。それをループでやっているだけで、それが化合します。ループ内にDocumentFragmentを使用して、ループが完了するとそのループを1回追加する必要があります。