Javascript 如何编辑w3schools代码以允许两个或多个模态图像单击？

在单击一个图像以显示多个图像后，我无法调用函数以显示模式。目前，它仅适用于一个图像。如果在js代码和html代码中为变量指定的id对于所有图像都是相同的，那么该函数不应该对所有图像而不仅仅是一个图像起作用吗？我基本上有一个网站，我需要12个图像显示。每一个都应该在点击时放大。就像w3学校代码一样

//获取模式
var modal=document.getElementById（“myModal”）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById（“myImg”）；
var modalImg=document.getElementById（“img1”）；
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=函数（）{
modal.style.display=“无”；
}

#myImg{
边界半径：5px；
光标：指针；
过渡：0.3s；
}
#myImg:悬停{
不透明度：0.7；
}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退颜色*/
背景色：rgba（0,0,0,0.9）；/*黑色，不透明度*/
}
/*模态内容（图像）*/
.模态内容{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
}
/*模态图像字幕*/
#标题{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
文本对齐：居中；
颜色：#ccc；
填充：10px0；
高度：150像素；
}
/*添加动画*/
.模态内容，
#标题{
-webkit动画名称：缩放；
-webkit动画持续时间：0.6s；
动画名称：缩放；
动画持续时间：0.6s；
}
@-webkit关键帧缩放{
从{
-webkit变换：缩放（0）
}
到{
-webkit转换：缩放（1）
}
}
@关键帧缩放{
从{
变换：缩放（0）
}
到{
变换：缩放（1）
}
}
/*关闭按钮*/
.结束{
位置：绝对位置；
顶部：15px；
右：35px；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
}
.关闭：悬停，
.结束：聚焦{
颜色：#bbb；
文字装饰：无；
光标：指针；
}
/*较小屏幕上的100%图像宽度*/
@仅介质屏幕和（最大宽度：700px）{
.模态内容{
宽度：100%；
}
}

&时代；
&时代；

Id对于每个元素都应该是唯一的

希望下面的代码片段能有所帮助

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

body{font-family:Arial、Helvetica、sans-serif；}
#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

（标识符）的主要含义是唯一的，并且具有确切的名称

它需要重写，所以我添加了一个简单的脚本，没有更改常规样式：

handlemodalpoup（）；
函数handleModalPopup（）{
设mod=GetModalComponents（）；
设img=document.queryselectoral（'.img'）；
for（设i=0；i