为什么 QuerySelectorAll 在我的模态页面上不起作用

Question

我在编码和尝试通过书籍和其他可用资源自学方面还很陌生，所以请多多包涵。

有谁知道如何使用 querySelector 或 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>

Answer 1

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


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

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

建议：
只是为了提高代码的质量并使其更具动态性，您可以在所有模态中使用相同的 class 名称“.modal”，然后触发模态显示您可以再次使用 querySelectorAll() 一次 select 所有模态并循环遍历它们，以添加事件侦听器 ("click"), 你可以使用下面的代码来做到这一点:


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

如果您想进一步改进，可以使用另一个 class（例如“active”）来控制 class 的切换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;
}

为什么 QuerySelectorAll 在我的模态页面上不起作用

Why is QuerySelectorAll not working on my modal page

javascript

css

modal-dialog

css-selectors

queryselector