javascript - CSS 动画 - classList 仅更改第一个实例

Question

我正在尝试将动画应用于同一类（.whiteKey）的多个元素。以下代码仅将其添加到元素的第一个实例中。为什么是这样？

document.querySelector('.whiteKey').classList.add('keysAnimate');

＆HTML：

<button class="whiteKey"></button>
<button class="whiteKey"></button>
<button class="whiteKey"></button>

标签： javascriptcsscss-animations

Answer 1

querySelector()仅选择具有该 id/class 的第一个元素。您需要使用 选择按钮querySelectorAll()，然后循环遍历它们。

HTML：

<button class="whiteKey"></button>
<button class="whiteKey"></button>
<button class="whiteKey"></button>

JS：

var buttons = document.querySelectorAll(".whiteKey");
for(var i = 0; i < buttons.length; i++) {
  buttons[i].classList.add('keysAnimate');
}