如何在一個 HTML 文件中運行相同的 JS 腳本？

Question

我有一個 JS 腳本，當您單擊某個 HTML 元素時，它會打開一個模態對話框 window。

我的問題是該腳本僅適用於一個元素。 當我在另一個元素上調用相同的 class 名稱.trigger時，整個腳本無法工作。

HTML

<div class="trigger">
   <h2>Contact Me Form</h2>
      <div class="modal">
          <div class="modal-content">
              <span class="close-button">x</span>
              <p>Contact form details goes here</p>   
          </div>
       </div>
</div>

<div class="trigger">
   <h2>About Me</h2>
      <div class="modal">
          <div class="modal-content">
              <span class="close-button">x</span>
              <p>About Me details goes here</p>   
          </div>
       </div>
</div>

JS

          var modal = document.querySelector(".modal");
          var trigger = document.querySelector(".trigger");
          var closeButton = document.querySelector(".close-button"); 

          function toggleModal() {
              modal.classList.toggle("show-modal");
          }

          function windowOnClick(event) {
              if (event.target === modal) {
                  toggleModal();
              }
              else if (event.target === closeButton) {
                toggleModal();
              }
          }

          trigger.addEventListener("click", toggleModal);
          closeButton.addEventListener("click", toggleModal);
          window.addEventListener("click", windowOnClick);

編輯：我試圖更改我的 JS 代碼，但它仍然無法正常工作：

          var modals = document.querySelectorAll(".modal");
          const triggers = document.querySelectorAll('.trigger');
          var closeButtons = document.querySelectorAll(".close-button"); 

        for (const trigger of triggers) {
             trigger.addEventListener('click', toggleModal);
          }

          function toggleModal(event)
            event.target.querySelector('.modal').classList.toggle("show-modal");
          }

          function windowOnClick(event) {
              if (event.target === modal) {
                  toggleModal();
              }
              else if (event.target === closeButton) {
                toggleModal();
              }
          }


          closeButton.addEventListener("click", toggleModal);
          window.addEventListener("click", windowOnClick);
    ```

Answer 1

var modal = document.querySelector(".modal"); 僅選擇文檔中的第一個.modal 。 使用const modals = document.querySelectorAll('.modal'); 然后遍歷從中獲得的NodeList 。

像這樣：

const triggers = document.querySelectorAll('.trigger');

for (const trigger of triggers) {
  trigger.addEventListener('click', toggleModal);
}

function toggleModal(event) {
  event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal");
}

這將是 window 點擊監聽器：

// get the modals and make an array from the NodeList
// so we can use array methods on the list
const modals = Array.from(document.querySelectorAll('.modal'));
function windowOnClick(event) {
  // check if the clicked element is a modal, or in a modal
  if (modals.some((modal) => modal.contains(event.target))) {
    toggleModal();
  }
}

Answer 2

JavaScript 始終在整個 HTML 頁面上運行。 這不起作用的原因是document.querySelector(".class-name")只選擇了 class 的第一個元素。

編輯：我剛剛看到你對你的問題的評論。 抱歉，我無法發表評論，因為我還沒有 50 名聲望。 querySelectorAll選擇所有元素並返回一個數組。 您必須遍歷數組並使用 for 循環對數組中的每個元素執行您想要執行的任何操作。

Answer 3

在 function windowOnClick(event) ，您可以在if中添加更多條件語句。

例如：

if(event.target == modal || event.target == trigger) {

   //do stuff
}

然后對於toggleModal() function，您可以同時傳遞一個參數，將 class 添加到右側元素。

function toggleModal(element) {
    element.classList.toggle("show-modal");


}

如果上述方法沒有幫助，另一種解決方法是使用switch語句。

Answer 4

您可以按Id使用 select 嗎？

<div Id="1" class="trigger">

或在 Jquery 中：

$( ".trigger" ).first().

Answer 5

嘗試在 shopify https://shopify.dev/tutorials/customize-theme-add-size-chart中使用此設置

但是我們也已經使用了相同的模態，並希望在頁面上有 2 個指南。

但是當添加 2 時，最后一個彈出內容顯示為第一個觸發器。

關於如何使用此設置並在頁面上有多個彈出窗口和觸發器的任何見解