如何使代码在多个图像上工作 - HTML&CSS

Question

好的，我正在为我的朋友开发一个网站，当然，因为我有时自己记不住每一段代码，所以我使用 www.w3schools.com。我被困在图库上，我希望能够单击每个图像并全屏。我使用了来自以下代码：w3schools 但我就是无法管理这个脚本来处理 2 个或更多图像？它在第一个上工作得很好。有人可以帮忙吗？我使用的代码与上面给出的链接完全相同:D谢谢！

// 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('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// 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";
}

Answer 1

在您使用的代码中找到：

var img = document.getElementById('myImg');[...]img.onclick = function(){

getElementById只找到第一个带有所述 id的元素，如果你想在所有图像上设置 click 事件，你需要使用一个类并在其上循环，或者使用 jquery，因为它隐式循环每个元素。

Answer 2

您可以做的不是调用 img id 是从图像onclick事件调用函数，如下所示：

<img id="myImg1" src="img_snow.jpg" alt="Win" style="width:100%;max-width:300px" onclick="fx(this)">

编辑脚本，您可以为每个图像获取这样的函数来更新模态信息：

function fx(img){
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
modal.style.display = "block";
modalImg.src = img.src;
captionText.innerHTML = img.alt;

}