Question

我是编码新手，并且一直在自学。我正在为我的艺术作品创建一个网站。我想要它，以便点击的每个作品都会打开一个包含有关该作品信息的模式页面。我能够成功创建一个功能正常的模式页面，第一页的关闭按钮功能正常，但是当我添加第二个页面时，关闭按钮不起作用。

我尝试从 querySelector 更改为 QuerySelectorAll，但这似乎没有帮助。我想我很快就会尝试一个 forEach 函数，但不确定这是否可行。任何帮助表示赞赏。

HTML

<div id="modalPage1" class="modalFish">
        
        <div id="modalContent1" class ="modalFishContent">
            
            <span class="closeButton">+</span>   

        <div><img id="modalImg" class="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 id="modalContent2" class="modalTurtleContent">
            
            <span class="closeButton">+</span>   

        <div><img id="modalImg" class="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>

Javascript

    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';
});

Answer 1

要返回所有匹配项，请使用 querySelectorAll() 函数。

let closebtn = document.querySelectorAll(".myBtn");
closebtn.forEach(function(btn) {
   btn.addEventListener("click", function() {
      console.log('clicked')
   });
});

如何使关闭按钮在多个模态页面上工作

1 个答案: