在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在性能方面已经很昂贵。在一个循环中进行，只是把这个复合起来。您应该在循环内使用，然后在循环完成时追加一次。