Javascript 将“使用id”更改为“类”，以从6个图像中的任意一个打开模式

我在一行中有6个不同的图像，它们是从包含缩略图和高分辨率图像（与缩略图相同）的对象数组中随机选取的。我想能够点击任何缩略图，打开一个具有全屏高分辨率图像的模式。因为我使用的是id，所以它只适用于六幅图像中的第一幅。当我试图把它改成课堂时，它不起作用。我想把它改成类，因为据我所知，它将适用于所有六幅图像。我的阵列中有96个图像、48个缩略图和48个高分辨率图像。我将提供此阵列的节略样本。我还将提供HTML、JavaScript和CSS（都是节略的）

我试过使用.avengerpic和avengerpic（类的名称），但两者都不起作用。我想显示6个缩略图在一行，并能够点击其中任何一个，并打开一个更大的高分辨率图像模式

让picArray=[
{缩略图：https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_1.jpg”，图片：
"https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_large_1.jpg“}，
{缩略图：https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_2.jpg”，图片：
"https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_large_2.jpg“}，
{缩略图：https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_3.jpg”，图片：
"https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_large_3.jpg“}，
{缩略图：https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_4.jpg”，图片：
"https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_large_4.jpg“}，
{缩略图：https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_5.jpg”，图片：
"https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_large_5.jpg“}，
{缩略图：https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_6.jpg”，图片：
"https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_large_6.jpg“}，
{缩略图：https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_7.jpg”，图片：
"https://rcabrerapics.s3.us-east- 
2.amazonaws.com/assets/avengers_large_7.jpg“}]
让moviePics=function（）{
document.queryselectoral（'.avengerPic'）.forEach（函数（e）{
const randomPic=Math.floor（（Math.random（）*picArray.length））；
e、 src=picArray[randomPic]。缩略图；
});
}
电影（）；
让modal=document.getElementById（“myModal”）；
设img=document.getElementById（“myImg”）；
让modalImg=document.getElementById（“img01”）；
让captionText=document.getElementById（“caption”）；
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
captionText.innerHTML=this.alt；
}
设span=document.getElementsByClassName（“close”）[0]；
span.onclick=函数（）{
modal.style.display=“无”；
}
让modal=document.getElementById（“myModal”）；
设img=document.getElementById（“myImg”）；
让modalImg=document.getElementById（“img01”）；
让captionText=document.getElementById（“caption”）；
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
captionText.innerHTML=this.alt；
}
设span=document.getElementsByClassName（“close”）[0]；
span.onclick=函数（）{
modal.style.display=“无”；
}

照片
&时代；
&时代；

.container{
显示器：flex；
调整项目：基线；
弯曲方向：行；
柔性包装：nowrap；
垂直对齐：中间对齐；
利润率：5px15px；
}
.pics img{
填充：2px；
框大小：边框框；
光标：指针；
}
.莫代尔{
显示：无；
位置：固定；/*不移动*/
z索引：1；/*位于顶部*/
填充顶部：50px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
/*背景色：rgb（0,0,0,0.75）*/
}
.模态内容{
保证金：自动；
/*位置：固定*/
显示：块；
宽度：85%；
最大宽度：1000；
最高高度：520；
}
.标题{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
文本对齐：居中；
颜色：#ccc；
填充：10px0；
高度：150像素；
}
.结束{
位置：绝对位置；
顶部：15px；
右：35px；
颜色：rgb（180、180、180）；
字体大小：40px；
/*字体大小：粗体*/
过渡：0.3s；
}

让moviePics=function（）{
document.queryselectoral（'.avengerPic'）.forEach（函数（e）{
const randomPic=Math.floor（（Math.random（）*picArray.length））；
e、 src=picArray[randomPic]。缩略图；
});
}
电影（）；
设imgs=document.queryselectoral（“.avengerPic”）；
让closeBtns=document.queryselectoral（“.close”）；
对于（var i=0；iIt工作起来很有魅力！！非常感谢！我正在制作一个模块，类似于在IMDb上找到的模块，他们称之为mediastrip。我从您共享的代码中学到了很多，我将
let moviePics = function() {
    document.querySelectorAll('.avengerPic').forEach(function(e) {
        const randomPic = Math.floor((Math.random() * picArray.length));
        e.src = picArray[randomPic].thumbnail;
    });
}

moviePics();


let imgs= document.querySelectorAll(".avengerPic");    
let closeBtns = document.querySelectorAll(".close");
for (var i=0; i<imgs.length; i++){
    imgs[i].addEventListener('click', function(){
        let thumbSrc = this.src;
        let bigImgSrc;
        for(var j=0; j<picArray.length; j++){
           if (thumbSrc == picArray[j].thumbnail){
               bigImgSrc = picArray[j].image
           }
        }    
        this.nextElementSibling.style.display = "block";
        this.nextElementSibling.children[1].src = bigImgSrc;
        this.nextElementSibling.children[2].innerHTML = this.alt;
     })
 }
for (var i=0; i<closeBtns.length; i++){
    closeBtns[i].addEventListener('click', function(){
        this.parentElement.style.display = "none";    
    })
}