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

提问者：小点点

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

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

(&P； HTML:

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

共3个答案

匿名用户

QuerySelector()仅选择具有该ID/类的第一个元素。您需要使用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');
}

匿名用户

正如其他答案所提到的，您应该使用document.QuerySelectorAll()然后您应该循环遍历所有的结果节点，您可以使用.foreach()循环遍历它们并将类添加到类列表中，下面是一个工作片段:

null

let whiteKeys = document.querySelectorAll('.whiteKey');

whiteKeys.forEach((el) => {
  el.classList.add('keysAnimate');
});

.keysAnimate {
  border: 1px solid red;
}

<button class="whiteKey">button 1</button>
<button class="whiteKey">button 2</button>
<button class="whiteKey">button 3</button>

匿名用户

QuerySelector只返回DOM中匹配的第一个元素。您需要的是QuerySelectorAll()。

然后你会做一些类似的事情

const elements = document.querySelectorAll(".whiteKey");
elements.forEach(element => element.classList.add('keysAnimate'))