首頁 > web前端 > css教學 > 主體

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

Susan Sarandon
發布: 2024-11-06 00:06:02
原創
263 人瀏覽過

Why Does `querySelector` Only Select the First Element and How to Fix It?

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

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

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

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

這是已修正的程式碼:

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

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!