图片打开模式

我有一些图像的行和列，我想打开一个模态时，他们被点击。到目前为止，只有第一个图像将打开模态，我不能为我的生活弄清楚为什么它不工作的所有其他代码下面:

HTML

<div class="row">
<div class="col-4">
<img src="Assets/Images/homepage-section-image.png" class="modal" id="modal">
</div>
<div class="col-4">
<img src="Assets/Images/homepage-section-image.png" class="modal" id="modal">
</div>
<div class="col-4">
<img src="Assets/Images/homepage-section-image.png" class="modal" id="modal">
</div>
<div class="col-4">
<img src="Assets/Images/homepage-section-image.png" class="modal" id="modal">
</div>
</div>

const modal_open = document.getElementById('modal');
modal_open.addEventListener('click', () => {
document.getElementById("my_modal").style.display = "block";
});

这是因为getElementById只返回一个给定id的元素，在你的情况下只有第一个。不妨试试下面的方法。

const clicker = () => {
//get htmlCollection of the img elements by class name 
const imgs = document.getElementsByClassName('modal');
//iterate over the images and add an event listener 
for(let img of imgs){
img.addEventListener('click', () => {
alert("clicked!")
});
}
}
window.onload = () => {
clicker()
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js.js"></script>
<title>Document</title>
</head>
<body>
<div class="row">
<div class="col-4">
<img src="{src}" class="modal" id="modal">
</div>
<div class="col-4">
<img src="{src}" class="modal" id="modal">
</div>
<div class="col-4">
<img src="{src}" class="modal" id="modal">
</div>
<div class="col-4">
<img src="{src}" class="modal" id="modal">
</div>
</div>
</body>
</html>

Ofc代替alert('clicked') add

document.getElementById("my_modal").style.display = "block";

相关内容

最新更新

热门标签：