Javascript 用于画廊功能的模型图像可以'；不能在许多图像上使用

大家好，我正在尝试为我的图库制作模型图像功能，但我不能在很多图像上使用该功能，有没有关于如何修复它的建议？我可以更改var img以按类名收集元素吗？谢谢你

代码如下：

<div id="myModal" class="modal">
   <span class="close">&times;</span>
   <img class="modal-content" id="img01">
</div>

<div class="container-fluid padding gallerysection text-center" style="padding-bottom:30px;">
  <div class="row padding fadeineffect">
    <div class="col-lg-6">
      <img id="modalImg" src="img/gallery/MR4.jpg" alt="MR Cello 1" class="galleryphoto img-fluid">
    </div>

    <div class="col-lg-6">
      <img src="img/gallery/MR5.jpg" alt="MR Cello 2" class="galleryphoto img-fluid">
    </div>
  </div>
</div>

我的Java脚本代码：

// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("modalImg");
var modalImg = document.getElementById("img01");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

//获取模式
var modal=document.getElementById（“myModal”）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById（“modalImg”）；
var modalImg=document.getElementById（“img01”）；
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
}
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
}

处理多个图像意味着处理一个集合。对于收集工作，方法

forEach

效果良好：

[].forEach.call(img, function (img_curr) {
    img_curr.onclick = function () {
        modal.style.display = "block";
        modalImg.src = this.src;
    };
});

img\u curr

-收藏中的当前图像

对所有

img

标记使用class

modalImg

var modal=document.getElementById（“myModal”）；
var img=document.getElementsByClassName（“modalImg”）；
var modalImg=document.getElementById（“img”）；
[]forEach.call（img，函数（img\u curr）{
img\u curr.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
};
});
var span=document.getElementsByClassName（“关闭”）[0]；
span.onclick=函数（）{
modal.style.display=“无”；
};
.modal{
显示：无；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
}
.模态内容{
保证金：自动；
显示：块；
宽度：100%；
最大宽度：850px；
}

&时代；
您好，谢谢您的回复。我的代码非常好用。非常感谢。如果我没有弄错的话，基本上for-each将帮助我们在每次单击时调用函数打开模态？@KimSan，您好。我很乐意帮忙。方法
forEach（）
允许您通过迭代当前项来处理项集合。是的，在您的情况下，为每个图像打开一个模式。
[].forEach.call(img, function (img_curr) {
    img_curr.onclick = function () {
        modal.style.display = "block";
        modalImg.src = this.src;
    };
});