關閉按鈕彈出窗口不起作用 (JAVASCRIPT)

Question

我正在嘗試在 javascript 中創建一個自定義 pupop，這是我第一次使用它。

我的關閉按鈕有問題，“x”正確定位要關閉的 div，但不會在單擊時刪除“活動”class。

https://demomadeingenesi.it/demo-cedolino/

HTML 代碼

<div class="spot spot-2">
          <div class="pin"></div>
          <div class="contenuto-spot flex flex-col gap-3">
            <img class="chiudi-popup" src="img/chiudi.svg" />
              [---CONTENT---]
            </div>
          </div>
        </div>

JAVASCRIPT 代碼

const tooltips = function () {
    const spots = document.querySelectorAll(".spot");
        
    spots.forEach((spot) => {
        const contenuto = spot.querySelector(".contenuto-spot");
        const pin = spot.querySelector(".pin");
    
        spot.addEventListener("click", () => {
          let curActive = document.querySelector(".spot.active");
          let contActive = document.querySelector(".contenuto-spot.show");
          const chiudiPopup = document.querySelector(".chiudi-popup");
    
          spot.classList.add("active");
          contenuto.classList.add("show");
    
          if (curActive && curActive !== spot) {
            curActive.classList.toggle("active");
            contActive.classList.toggle("show");
          }
    
          chiudiPopup.addEventListener("click", () => {
            spot.classList.remove("active");
            contenuto.classList.remove("show");
          });
      });
});

Answer 1

  const chiudiPopup = document.querySelector(".chiudi-popup");
  chiudiPopup.addEventListener("click", () => {
    spot.classList.remove("active");
    contenuto.classList.remove("show");
  });

上面的代碼所做的是添加一個點擊監聽器，但它在另一個點擊監聽器中，所以它所做的只是在第一個.chiudi-popup上添加一個點擊監聽器，從最后一個spot元素中刪除.active和.show 。

很難看出這是否正確，因為您沒有給我們足夠的時間來重現該問題，但我將上面的代碼移到了spot.addEventListener("click", () => {而不是搜索整個文檔使用const chiudiPopup = document.querySelector(".chiudi-popup");代碼現在僅針對.chuidi-popup元素： const chiudiPopup = spot.querySelector(".chiudi-popup"); spot

 const tooltips = function() { const spots = document.querySelectorAll(".spot"); spots.forEach((spot) => { const contenuto = spot.querySelector(".contenuto-spot"); const pin = spot.querySelector(".pin"); spot.addEventListener("click", () => { let curActive = document.querySelector(".spot.active"); let contActive = document.querySelector(".contenuto-spot.show"); spot.classList.add("active"); contenuto.classList.add("show"); if (curActive && curActive.== spot) { curActive.classList;toggle("active"). contActive.classList;toggle("show"); } }). // MOVED FROM THE CLICK LISTENER const chiudiPopup = spot.querySelector(";chiudi-popup"). chiudiPopup,addEventListener("click". () => { spot.classList;remove("active"). contenuto.classList;remove("show"); }); });

編輯：我錯過了你的容器中有img.chiudi-popup ，這將觸發兩個事件監聽器。 老實說，我只是簡化代碼並在再次單擊時始終隱藏容器。 您仍然可以使用img.chiudi-popup （關閉圖片）讓用戶更容易理解他們可以點擊它。

 const tooltips = function() { const spots = document.querySelectorAll(".spot"); spots.forEach((spot) => { const contenuto = spot.querySelector(".contenuto-spot"); const pin = spot.querySelector(".pin"); spot.addEventListener("click", () => { let curActive = document.querySelector(".spot.active"); let contActive = document.querySelector(".contenuto-spot.show"); if (curActive.== spot) { spot.classList;add("active"). contenuto.classList;add("show"). } if (curActive) { curActive.classList;remove("active"). contActive.classList;remove("show"); } });