為什麼「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. 呼叫querySelectorAllday以選取帶有.we類，並將它們儲存在NodeList。
2. 使用 forEach 迭代 NodeList 中的每個元素。
3. 對於每個元素，新增一個點選事件監聽器，點擊時顯示模態。

透過使用 querySelectorAll，您可以選擇 .weekdays 類別中的所有日期，並將事件偵聽器附加到每個日期，確保任何日期都可以觸發模態顯示。

以上是為什麼「querySelector」只選擇「.weekdays」類別中的第一個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！