为什么'querySelector”仅选择第一个元素以及如何解决此问题？

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

理解 querySelector

在 JavaScript 中，querySelector 方法选择第一个元素根据提供的选择器字符串匹配文档中的元素。如果多个元素与选择器匹配，则仅返回第一个元素。

问题描述

在您提供的 CodePen 中，您使用 querySelector 选择工作日类的元素。但是，您会发现，只有第一个匹配元素会触发单击事件，而其他所有元素都不会触发。

解决方案：对多个元素使用 querySelectorAll

要解决此问题，您应该使用 querySelectorAll方法，它返回一个包含所有匹配元素的 NodeList。然后，您可以迭代 NodeList 并将事件处理程序附加到每个元素。

修订的代码：

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

说明：

• document.querySelectorAll( ".weekdays")：选择所有具有工作日类的元素并将它们作为NodeList.
• forEach：迭代 NodeList 中的每个元素。
• elem.addEventListener("click", ...)：为每个工作日元素附加一个点击事件监听器，这会触发与之前显示表单模态的代码相同。

现在，当您单击任何工作日元素时，模态将正确显示，解决了您在 querySelector 中仅选择第一个元素时遇到的问题。

以上是为什么'querySelector”仅选择第一个元素以及如何解决此问题？的详细内容。更多信息请关注PHP中文网其他相关文章！