javascript - 使用 javascript 的模态图像

Question

我正在尝试使用模态图像创建模拟图像库。

Javascript 对我来说总是有点困难。我尝试使用 w3schools 教程来做到这一点 here ，但我已尝试将其应用于多个图像，我认为这是问题所在。

有没有办法定位多个 ID？我已经尝试将 document.getElementById("_"); 更改为 document.getElementsByClassName("_"); 但是，仍然没有成功。我知道 w3schools 有一个模态画廊的例子，但我不想让模态内容之外的导航。我只是不想在新标签页中打开图片。

我已经上传了我的进度 here

如果有人能在正确的方向上提供帮助或照亮，我们将不胜感激。

var modal = document.getElementById('myModal');

var img = document.getElementsByClassName("tokyo");
var modalImg = document.getElementsByClassName("modal-content");
img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
}

var span = document.getElementsByClassName("close");
    span.onclick = function() {
    modal.style.display = "none";
}

Answer 1

var img = document.getElementsByClassName("tokyo");

返回一个元素数组。所以你应该用索引访问它们。

img[0].onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
}