纯JavaScript模式图像的问题
我有一个模式弹出图像的问题。我有一个图像列表,并尝试使用此代码(做了一些更改):但它只适用于第一条消息。如何使其适用于库中的所有邮件纯JavaScript模式图像的问题,javascript,html,css,Javascript,Html,Css,我有一个模式弹出图像的问题。我有一个图像列表,并尝试使用此代码(做了一些更改):但它只适用于第一条消息。如何使其适用于库中的所有邮件 <div> <div class="portfolio-overlay"> <img src="img/portfolio/Transeco-small.jpg"> <div class="portfolio-image-overlay
<div>
<div class="portfolio-overlay">
<img src="img/portfolio/Transeco-small.jpg">
<div class="portfolio-image-overlay image-overlay-content">
<div class="portfolio-icons">
<i class="icon-zoom-in open-big"><img src="img/portfolio/Transeco-big.jpg" class="img-closed"></i>
<a href="http://www.google.com" target="_blank"><i class="icon-link"></i></a>
</div>
</div>
</div>
</div>
<div>
<div class="portfolio-overlay">
<img src="img/portfolio/Transeco-small.jpg">
<div class="portfolio-image-overlay image-overlay-content">
<div class="portfolio-icons">
<i class="icon-zoom-in open-big"><img src="img/portfolio/Transeco-big.jpg" class="img-closed"></i>
<a href="http://www.google.com" target="_blank"><i class="icon-link"></i></a>
</div>
</div>
</div>
</div>
<div>
<div class="portfolio-overlay">
<img src="img/portfolio/Transeco-small.jpg">
<div class="portfolio-image-overlay image-overlay-content">
<div class="portfolio-icons">
<i class="icon-zoom-in open-big"><img src="img/portfolio/Transeco-big.jpg" class="img-closed"></i>
<a href="http://www.google.com" target="_blank"><i class="icon-link"></i></a>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal myModal">
<span class="close">×</span>
<img class="modal-content img01">
</div>
// Get the modal
var modal = document.querySelector(".myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.querySelector('.open-big');
var modalImg = document.querySelector(".img01");
var probaa = document.querySelector('.open-big img');
img.onclick = function(){
modal.style.display = "block";
modalImg.src = probaa.src;
}
// 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";
}
&时代;
关闭模态的元素
var span=document.getElementsByClassName(“关闭”)[0];
//当用户单击(x)时,关闭模式对话框
span.onclick=function(){
modal.style.display=“无”;
}
控制台中没有错误,但它只对firs图像有效
var img = document.querySelector('.open-big');
document.querySelector
仅选择单个元素,在这种情况下,第一个元素的类为open big
要选择所有元素,必须使用document.querySelectorAll
然后,您可以迭代该集合,并向每个集合添加事件侦听器:
var imgs = document.querySelectorAll('.open-big');
for (i = 0; i < imgs.length; ++i) {
imgs[i].onclick = function(){
modal.style.display = "block";
modalImg.src = probaa.src;
}
}
有
文档。查询选择器
返回与查询匹配的第一个
元素
。使用document.querySelectorAll()
并在所有img上循环以设置onclick事件。现在我发现我还有另一个问题。。。我之前没有看到这个,因为我在每个链接上都有相同的图片。现在,当我更改图片时,我看到第一个“大图像”正在打开我单击的“小图像”。当我看代码时,我发现它是合乎逻辑的,每个图像都有相同的类,第一个打开是正常的。现在我需要从每个元素中删除类“openbig”,并在单击特定元素时在javascript中动态添加它。你能帮我在代码中实现吗?
[].forEach.call(imgs, function(img) {
// do whatever
});