我是一个编程新手，正在尝试通过书籍和其他可用资源自学，所以请原谅我。
有没有人知道如何使我的关闭按钮工作的所有模态页面使用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>您需要选择所有的"关闭按钮";元素使用querySelectorAll()，然后循环遍历每个元素，并切换相同父节点中模态的状态(".modalContent"在这种情况下)。
你可以用下面的代码做到这一点:
document.querySelectorAll('.closeButton').forEach(button => {
button.addEventListener('click', () => {
button.parentElement.parentElement.style.display = "none";
})
})
我们使用了">parentElement";因为我们需要从。closebutton "往上走两层节点以模式为目标．
建议:
为了提高代码质量并使其更具动态性，您可以使用相同的类名">.modal";在你所有的模态中，然后触发模态显示，你可以使用querySelectorAll()再次选择所有模态并循环它们，要添加事件侦听器(">单击)")，您可以使用下面的代码:
document.querySelectorAll('.modal').forEach(modal => {
modal.addEventListener('click', () => {
modal.style.display = "flex";
})
})
如果你想进一步提高你可以使用另一个类(例如">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;
}