我正在尝试一个只有javascript的解决方案（没有jQuery或没有HTML-JS），我正在获取DOM元素的所有childNodes。然后我在每个子节点之后添加一个文本区域和一个按钮。
这是一个简化的代码片段：
var div = document.getElementById("abc");
var children = div.childNodes;
console.log(children[1])
var child;
for(var i=1; i < children.length; i++){
var input = document.createElement("textarea");
input.name = "post"+i;
children[i].appendChild(input); //add text area
var feedbackButton = document.createElement("button");
feedbackButton.innerHTML = "Send";
feedbackButton.classList.add("feedbackButton" + i);
children[i].appendChild(feedbackButton); //add button
}
feedbackButton.onclick = function() {myFunction(feedbackButton.getAttribute("class"))};
那么我的函数定义如下：
function myFunction(att) {
console.log('You Clicked: '+ att);
如果for循环迭代5次，则无论按下什么按钮，控制台都将始终记录feedbackButton5。我知道为什么会这样（因为它在for循环中并覆盖了值）但我正在寻找一个解决方案，我可以让控制台记录正确的Button压缩类名。
使用const myFunction = button => () => console.log(button.getAttribute("class"))创建myFunction
所以你可以在for循环中部分应用你的feedbackButton。它的工作原理是你将它存储在函数范围内而不是在调用时引用它。
<html>
<body>
<div id="abc">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
const myFunction = button => () => console.log(button.getAttribute("class"));
var div = document.getElementById("abc");
var children = div.children;
for(var i=0; i < children.length; i++){
var input = document.createElement("textarea");
input.name = "post"+i;
children[i].appendChild(input);
var feedbackButton = document.createElement("button");
feedbackButton.innerHTML = "Send";
feedbackButton.classList.add("feedbackButton" + i);
children[i].appendChild(feedbackButton);
feedbackButton.onclick = myFunction(feedbackButton);
}
</script>
</body>
</html