带有 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;
}