javascript - 为什么 QuerySelectorAll 在我的模式页面上不起作用

Question

我对编码很陌生，并试图通过书籍和其他可用资源自学，所以请与我交谈。

有谁知道如何使用querySelectoror使我的关闭按钮适用于所有模式页面QuerySelectorAll？目前，我正在尝试创建一个展示我的作品的网站。当您单击每件作品时，它都会打开一个模式页面，进一步描述每件作品。出于某种原因，当我使用 时，我的关闭按钮似乎只适用于第一页QuerySelector，但是当我将其更改为 时querySelectorAll，关闭按钮在任何页面上都无法正常工作。我认为我需要使用querySelectorAll，因为关闭按钮将位于每个模式页面上，并且我试图.closeButton一次捕获所有类。

document.getElementById('portfolioPg1').addEventListener('click',
  function() {
    document.querySelector('.modalFish').style.display = 'flex';
  });

document.getElementById('portfolioPg2').addEventListener('click',
  function() {
    document.querySelector('.modalTurtle').style.display = 'flex';
  });


document.querySelector(".closeButton").addEventListener('click',
  function() {
    document.querySelector('.modalFish').style.display = 'none';
    document.querySelector('.modalTurtle').style.display = 'none';
  });

<div ID="modalPage1" class="modalFish">

  <div class="modalContent" id="modalFishContent">

    <span class="closeButton">+</span>

    <div><img class="modalImg" ID="modalFishImg" src="Images/Fish School.jpg"></div>
    <div>
      <p class="modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall, I decided to use this as the background. Being that it's a dark color, it's easy to layer on different colors that will coordinate well, while
        adding a pop to it. </p>

      <p class="modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces appear a bit obscure, almost
        reminicent of a pile of leaves. Looking closely, we can see that the origami is in fact fish swimming in all different driections.
      </p>
    </div>


  </div>
</div>


<div ID="modalPage2" class="modalTurtle">

  <div class="modalContent" ID="modalTurtleContent">

    <span class="closeButton">+</span>

    <div><img class="modalImg" ID="modalTurtleImg" src="Images/Sea Turtle.jpg"></div>
    <div>
      <p class="modalTxt">After a trip to Mallorca, Spain, I discovered a new love for turtles. I ended up going to two aquariums while I was there, and found the turtles to be very cute. The way they slowly moved about, and the way they swam. I remember seeing them all
        stacked piled up on top of each other as one was climbing on top of the other ones, and accidentally knocked one of the turtles into the water.</p>

      <p class="modalTxt">There was something a bit simple, and adorable about these turtles, so I wanted to create a piece that reflected simplicity, and humbleness. I was also inspired by the tropical vibes as well, which led to my color scheme of light blue for the water,
        and brighter colors for each of the turtles. The blue is painted on a bit heavy to represent the waves of the water. In order to achieve a simple and adorable vibe, I needed to focus on having the right colors, and limit the number of turtles
        I had, while making sure I did not take up too much of the blue background.
      </p>
    </div>


  </div>
</div>

<script src="Origami Mami.js"></script>

标签： javascriptcsscss-selectorsmodal-dialogqueryselector

Answer 1

您需要使用 querySelectorAll() 选择所有“关闭按钮”元素，然后遍历每个元素并切换同一父节点中的确切模式的状态（在本例中为“.modalContent”）。
您可以使用以下代码执行此操作：

document.querySelectorAll('.closeButton').forEach(button => {
    button.addEventListener('click', () => {
        button.parentElement.parentElement.style.display = "none";
    })
})

我们确实使用了两次“ parentElement ”，因为我们需要从“.closeButton”节点向上两层来定位modal。

建议：
为了提高代码质量并使其更具动态性，您可以在所有模态中使用相同的类名“ .modal ”，然后触发模态以显示您可以再次使用querySelectorAll()来选择所有模态框一次并循环通过它们，添加事件监听器（“点击”），你可以使用下面的代码来做到这一点：

document.querySelectorAll('.modal').forEach(modal => {
    modal.addEventListener('click', () => {
        modal.style.display = "flex";
    })
})

如果您想进一步改进，您可以使用另一个类（例如“ active ”）来控制切换类“ active ”并更改模式的样式而不是直接从 Javascript 更改样式，您可以通过将以前的代码更改为以下代码：

Javascript：

document.querySelectorAll('.modal').forEach(modal => {
    modal.addEventListener('click', () => {
        modal.classList.add('active');
    })
})

document.querySelectorAll('.closeButton').forEach(button => {
    button.addEventListener('click', () => {
        button.parentElement.parentElement.style.classList.remove('active');
    })
})

CSS：

.modal {
    display: none;
}

.modal.active {
    display: flex;
}