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

使用javascript的模态图像

1 个答案: