為什麼 `querySelector` 只選擇第一個元素以及如何修復它？

為什麼querySelector 只選擇第一個元素以及如何修復它

使用querySelector 時，重要的是要記住它只選擇第一個元素文檔中的匹配元素。如果您有多個具有相同類別或 ID 的元素，則僅傳回第一個元素。

在您的情況 中，您有多個具有相同類工作日的按鈕，表示日曆上的日期。當你點擊其中一個時，它不起作用，因為 querySelector 只選擇了第一個。

解決方案是使用 querySelectorAll 代替，它傳回所有的節點列表匹配元素。然後，您可以迭代清單​​並將事件偵聽器附加到每個元素。

這是已修正的程式碼：

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

這會將事件偵聽器附加到工作日類別的每個元素，並確保按一下任何日期都可以開啟表單。

以上是為什麼 `querySelector` 只選擇第一個元素以及如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！