在onclick函數中傳遞循環生成元素的值

Question

我想將一個參數（resultset中的字符串）傳遞給生成的鏈接的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的原因是因爲這是循環完成時name屬性存儲在其中的最後一個值。

您需要在每次循環迭代時傳遞該數據的副本。將代碼更改爲使用let而不是var作爲變量聲明，以便在循環的每次迭代中，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在性能方面已經很昂貴。在一個循環中進行，只是把這個複合起來。您應該在循環內使用，然後在循環完成時追加一次。