从使用 id 更改为 class 以从 6 个图像中的任何一个打开模态

Question

我在一行中有 6 个不同的图像，它们是从包含缩略图和高分辨率图像（与缩略图相同）的对象数组中随机挑选的。我希望能够单击任何缩略图并打开带有全屏高分辨率图像的模式。由于我使用的是 id，它只适用于六个图像中的第一个。当我尝试将其更改为类时，它不起作用。我想将其更改为类，因为我的理解是它将适用于所有六个图像。我的阵列中有 96 张图像、48 张缩略图和 48 张高分辨率图像。我将提供此数组的删节示例。我还将提供 HTML、JavaScript 和 CSS（均已删节）。我试过使用 .avengerpic 和 avengerpic（类名），但都不起作用。我想连续显示 6 个缩略图，并且能够单击其中任何一个并打开一个带有较大高分辨率图像的模式。        let picArray = [             {thumbnail: "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_1.jpg", image:              "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_large_1.jpg"},             {thumbnail: "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_2.jpg", image:              "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_large_2.jpg"},             {thumbnail: "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_3.jpg", image:              "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_large_3.jpg"},             {thumbnail: "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_4.jpg", image:              "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_large_4.jpg"},             {thumbnail: "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_5.jpg", image:              "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_large_5.jpg"},             {thumbnail: "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_6.jpg", image:              "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_large_6.jpg"},             {thumbnail: "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_7.jpg", image:              "https://rcabrerapics.s3.us-east-              2.amazonaws.com/assets/avengers_large_7.jpg"}]

Answer 1

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";    

    })

}