為什麼'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中文網其他相關文章！