模态HTML CSS javascript只在一个图像上工作

Question

我目前正在为一个学校项目制作一个模态，但我不知道为什么它不起作用。

html

 <div id="kw1cpraktijk">
        <img id="myImg" src="../assets/kw1cpraktijk.PNG">
        <h2>Praktijkopdracht P2</h2>
        <p>dit is wat tekst</p>
    </div>
    <div id="willem2praktijk">
        <img id="myImg1" src="../assets/willem2praktijk.PNG">
        <h2>Project P1</h2>
        <p>dit is wat tekst</p>
    </div>
    <div id="myModal" class="modal">
        <span class="close"> &times;</span>
        <img class="modal-content" id="img">
    </div>
css
    
#myImg
{
    
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%; 
    max-width:450px;
}


 .modal
    {
        display: none;
        position: fixed;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0, 0.85);
    }
    
    .modal-content
    {
        margin: auto;
        display: block;
        width: 100%;
        max-width: 800px;
        animation-name: zoom;
        animation-duration: 0.6s;
    }
    
    @keyframes zoom
    {
        from {transform:scale(0)}
        to {transform:scale(1);}
    }
    
    .close
    {
        position: absolute;
        color: white;
        font-size: 50px;
        font-weight: bold;
        right: 35px;
        top: 0;
    }
    
    .close:hover
    {
        color: grey;
        cursor: pointer;
        text-decoration: none;
    }

javascript

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");

img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
}
var exit = document.getElementsByClassName("close")[0];
exit.onclick = function() {
    modal.style.display = "none";
}

它只对第一张图像有效。我应该改变什么?我认为这与javascript有关，因为它只运行一次。我希望有人能帮帮我。

Lorem ipsum dolor sit met, consecent adiping elite。但是，尊严是由各种各样的东西构成的。我的意思是，我的意思是，我的意思是，我的意思是我的意思。现在的aliquam leo nec metus tristique, vitae eleifend ex finibus。Pellentesque sagittis luctus eros，在placerat mauris的疗效。悬浮性息肉位于卵形或卵形。舌状腺状腺，卵泡状腺状腺，卵泡状腺状腺，卵泡状腺状腺。"我讲我讲"，"我讲我的生活"，"我讲我的生活"，"我讲我的生活"。一般来说，这是一种姿势。交通工具。前庭小梁。Vivamus tempor leo eget ex aliquam solicitudin。发酵过程中悬浮液的浓度

Answer 1

两个图像都不起作用，因为您正在使用ID和onclick函数仅针对一个元素。我建议使用class，这样它就可以用于多个元素。请将javascript更改为以下内容:

var modal = document.getElementById("myModal");
var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");

for ( var e in img ) {
  img[e].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
  }
}

var exit = document.getElementsByClassName("close")[0];
exit.onclick = function() {
  modal.style.display = "none";
}

加上HTML:

<div id="kw1cpraktijk">
    <img class="myImg" src="../assets/kw1cpraktijk.PNG">
    <h2>Praktijkopdracht P2</h2>
    <p>dit is wat tekst</p>
</div>
<div id="willem2praktijk">
    <img class="myImg" src="../assets/willem2praktijk.PNG">
    <h2>Project P1</h2>
    <p>dit is wat tekst</p>
</div>
<div id="myModal" class="modal">
    <span class="close"> &times;</span>
    <img class="modal-content" id="img">
</div>

Answer 2

这应该可以正常工作!

所以你的代码只适用于第一张图像，你在js中有一个小问题，你没有在js中编写第二张图像的代码.

我没有改变你的代码(Id和className)，但我只增加了一些行来解决你的问题。

我不得不告诉你，使用id有时会产生一些问题，覆盖HTML总是比显示隐藏的div要好。

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var img2 = document.getElementById("myImg1");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");

img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
}
img2.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
}
var exit = document.getElementsByClassName("close")[0];
exit.onclick = function() {
modal.style.display = "none";
}