为什么'querySelector”只选择'.weekdays”类中的第一个元素？

querySelector 仅选择第一个元素

在代码中，您使用 querySelector 检索 .weekdays 类中的元素。但是，此方法仅选择与指定选择器匹配的第一个元素。由于您有多个具有相同类别的日期，因此它仅捕获第一个“1”日期。

如何修复它：使用 querySelectorAll

选择所有日期在 .weekdays 类中，您需要使用 querySelectorAll。此方法返回一个 NodeList，其中包含与给定选择器匹配的所有元素。以下是修复代码的方法：

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

说明：

此代码：

1. 调用 querySelectorAll 以选择带有.weekdays 类，并将它们存储在NodeList。
2. 使用 forEach 迭代 NodeList 中的每个元素。
3. 对于每个元素，添加一个单击事件监听器，单击时显示模态。

通过使用 querySelectorAll，您可以选择 .weekdays 类中的所有日期，并将事件侦听器附加到每个日期，确保任何日期都可以触发模态显示。

以上是为什么'querySelector”只选择'.weekdays”类中的第一个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！