Question

我正在尝试一个纯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按下的类名。 >

Answer 1

使用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

javascript-单击时获取按钮的正确值

1 个答案: