querySelectorAll 不适用于类，但普通的 querySelector 就可以了[重复]

Question

我一直在制作降临节日历，希望所有的门都能在点击时打开。 我将动画关闭并且它可以工作，但前提是我使用 querySelector； querySelectorAll 似乎不起作用。 我已经制作了三扇门进行测试，但还没有让它们全部动画化，以及为所有它们显示背景（但这是一个不同的主题）。 我觉得问题出在我编写 HTML 的方式上，因为 JS 以前可以工作。 我在这方面还很陌生，我希望在不使用网格或引用其他代码的情况下制作日历。

代码如下

HTML

<div class="door-back">
  <button class="door d25">25</button>
  <button class="door d24">24</button>
  <button class="door d23">23</button>
</div>

CSS（包括我为门位置制作的随机位置）

.door-back {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background: hotpink;
  margin: 50px;
}

.door {
  position: absolute;
  height: 50px;
  width: 50px;
  color: white;
  border: 2px solid teal;
  border-radius: 50px;
  background: indianred;
  cursor: pointer;
  transform-origin: left;
  transition: all 0.5s ease-in-out;
}

.d25 {
  top: 100px;
  bottom: 100px;
  left: 590px;
  right: 5px;
}
.d24 {
  top: 300px;
  bottom: 500px;
  left: 390px;
  right: 50px;
}
.d23 {
  top: 500px;
  bottom: 100px;
  left: 800px;
  right: 600px;
}
.doorOpen {
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-150deg);
}

JavaScript

const door = document.querySelectorAll('.door')
door.addEventListener('click', toggleDoor)

function toggleDoor() {
  door.classList.toggle('doorOpen')
}

就像我上面所说的，querySelector('.door') 有效，但仅适用于 d25，因为它是同类中的第一个元素。门我需要把它做成一个数组吗？也许我应该做 querySelectorAll("button")？

任何帮助和/或建议将不胜感激！谢谢你，希望你在外面安全！

Answer 1

querySelectorAll 返回一个 NodeList，而不是一个元素。所以不能直接给它添加事件监听器。

function toggleDoor(event) {
  event.target.classList.toggle('doorOpen')
}


let doors = document.querySelectorAll('.door');
[...doors].forEach(door => {
  door.addEventListener('click', toggleDoor)
})

querySelector 有效，因为它返回第一个匹配的元素。