回调函数不适用于 for 循环

Question

为什么 callButtonTwo() 功能不适用于所有按钮？只有 button1 有反应？

document.querySelector("h1").addEventListener("click", function() {
    alert("Working!");
})

var totalButton = document.querySelectorAll(".testSecond").length;
for (var i = 0; i < totalButton; i++) {
    document.querySelectorAll(".testSecond")[i].addEventListener("click", function() {
        var buttonNow = this.innerHTML;
        callButtonOne(buttonNow);
        callButtonTwo(buttonNow);
    });
}

function callButtonOne() {
    alert("I got clicked!");
};

function callButtonTwo() {
    var changeRed = document.querySelector(".testSecond");
    changeRed.classList.add("red");
    setTimeout(function() {
        changeRed.classList.remove("red");
    }, 300);
};

.red {
  background-color: red;
}

<h1 class="testFirst">Hello World!</h1>
<button class="testSecond button1" type="button" name="button">button1</button>
<button class="testSecond button2" type="button" name="button">button2</button>
<button class="testSecond button3" type="button" name="button">button3</button>
<button class="testSecond button4" type="button" name="button">button4</button>
<button class="testSecond button5" type="button" name="button">button5</button>

Answer 1

同时，在您的点击处理程序中，您有 var buttonNow = this.innerHTML;，它在那个按钮上运行，当您调用 callButtonTwo 时，您说 var changeRed = document.querySelector(".testSecond");在 第一个 按钮上操作（无论您单击哪个按钮）。

您需要告诉它您正在处理哪个按钮（例如通过将 this 作为参数传递）

Answer 2

在 callButtonTwo 中，您正在再次查询 .testSecond，这将始终 return 页面中具有 class 的第一个元素。如果您想以不同方式处理每个按钮，您应该将按钮元素作为参数传递给 callButtonTwo，如下所示：

var totalButton = document.querySelectorAll(".testSecond").length;
for (var i = 0; i < totalButton; i++) {
document.querySelectorAll(".testSecond")[i].addEventListener("click", function() {
var buttonNow = this.innerHTML;
callButtonOne(buttonNow);
callButtonTwo(this); // 'this' in this case is the clicked button element
});
}

[...]

function callButtonTwo(button) {
button.classList.add("red");
setTimeout(function() {
button.classList.remove("red");
}, 300);
};

我还会考虑更改您迭代元素的方式，以降低查询 DOM 的频率：

// 'querySelectorAll' returns an array which can be directly iterated using its method 'forEach'
document.querySelectorAll(".testSecond").forEach(function(button) {
  button.addEventListener("click", function() {
    var buttonNow = this.innerHTML;
    callButtonOne(buttonNow);
    callButtonTwo(this);
  });
});

Answer 3

问题是，您在 callButtonTwo 中的 querySelector 只找到第一个按钮，因为它们都具有相同的 class .testSecond.

一种可能的解决方案是将应为红色的按钮的引用添加到 callButtonTwo 函数，并使用该引用添加 class 名称。

看起来像这样：

function callButtonTwo(button) {
  button.classList.add("red");
  setTimeout(function() {
    button.classList.remove("red");
  }, 300);
};

你会这样称呼它：callButtonTwo(this);

这是一个基于您提供的代码的工作 example。

回调函数不适用于 for 循环

Callback Function does not work with for Loop

javascript

for-loop

callback