HTML、CSS和JavaScript中的库无法正常工作

我有一个画廊的小问题，我提出（我是初学者-仍在学习）根据这一点。当我点击第一张照片时，它工作正常，但其余的照片似乎没有显示出来

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

正文{
字体系列：Arial、Helvetica、无衬线字体；
背景：#000；
}
#容器{
宽度：960px；
最小宽度：600px；
最小高度：800px；
左边距：自动；
右边距：自动；
边框：1px实心#adadad；
背景:#303030；
z指数：1；
}
.imgbucket{
浮动：左；
利润率：15px 0px 0px 15px；
边框：2px虚线#13b7bd；
高度：300px；
边界半径：5px；
}
.imgbucket:悬停{
转换：translateY（-10px）；
边框：2个虚线#00f6ff；
盒影：0px 0px 25px#11f6ff；
}
/*Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3*/
#myImg{
边界半径：5px；
光标：指针；
过渡：0.3s；
}
#myImg:hover{opacity:0.7；}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.9）；/*黑色w/不透明度*/
}
/*模态内容（图像）*/
.模态内容{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
}
/*模态图像字幕*/
#标题{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
文本对齐：居中；
颜色：#ccc；
填充：10px0；
高度：150像素；
}
/*添加动画*/
.模式内容#标题{
-webkit动画名称：缩放；
-webkit动画持续时间：0.6s；
动画名称：缩放；
动画持续时间：0.6s；
}
@-webkit关键帧缩放{
来自{-webkit变换：缩放（0）}
到{-webkit转换：缩放（1）}
}
@关键帧缩放{
来自{transform:scale（0）}
到{变换：比例（1）}
}
/*关闭按钮*/
.结束{
位置：绝对位置；
顶部：15px；
右：35px；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
}
.关闭：悬停，
.结束：聚焦{
颜色：#bbb；
文字装饰：无；
光标：指针；
}
/*较小屏幕上的100%图像宽度*/
@仅介质屏幕和（最大宽度：700px）{
.模态内容{
宽度：100%；
}
}

&时代；

id

必须是唯一的，在您的情况下，所有图像都具有相同的

id

。每个图像的第一个属性将属性

id

替换为属性

class

。然后替换

var img=document.getElementById（“myImg”）

by

var-imgs=document.queryselectoral（“.myImg”）并在每个图像上循环


//获取模式
var modal=document.getElementById（“myModal”）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var imgs=document.queryselectoral（“.myImg”）；
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
imgs.forEach（img=>{
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
captionText.innerHTML=this.alt；
}
});
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
正文{
字体系列：Arial、Helvetica、无衬线字体；
背景：#000；
}
#容器{
宽度：960px；
最小宽度：600px；
最小高度：800px；
左边距：自动；
右边距：自动；
边框：1px实心#adadad；
背景:#303030；
z指数：1；
}
.imgbucket{
浮动：左；
利润率：15px 0px 0px 15px；
边框：2px虚线#13b7bd；
高度：300px；
边界半径：5px；
}
.imgbucket:悬停{
转换：translateY（-10px）；
边框：2个虚线#00f6ff；
盒影：0px 0px 25px#11f6ff；
}
/*Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3*/
#myImg{
边界半径：5px；
光标：指针；
过渡：0.3s；
}
#myImg:悬停{
不透明度：0.7；
}
/*模态（背景）*/
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
填充顶部：100px；
/*盒子的位置*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.9）；
/*黑色w/不透明度*/
}
/*模态内容（图像）*/
.模态内容{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
}
/*模态图像字幕*/
#标题{
保证金：自动；
显示：块；
W