为什么在使用querySelectorAll()时querySelector只选择第一个元素？

为什么 querySelector 只选择第一个元素以及如何解决这个问题？

当在选择器上使用 querySelectorAll() 方法时选择多个元素，它返回一个节点列表。

在提供的代码中，您使用 querySelectorAll() 选择类为“weekdays”的所有元素。问题是您稍后在代码中使用 querySelector() 向列表中的每个元素添加事件侦听器，该事件侦听器仅针对列表中的第一个元素。

要解决此问题，您应该使用forEach() 迭代列表中的每个元素并向每个元素添加事件侦听器。

以下是更新后的代码：

document.querySelectorAll(".weekdays").forEach(elem => elem.addEventListener("click",
 () => {
    document.querySelector(".bg-modal").style.display = "flex";
  }));

以上是为什么在使用querySelectorAll()时querySelector只选择第一个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！