多次使用JavaScript脚本
我不相信以前有人问过这个问题。如果有，我很抱歉，因为我找不到它。
我有一个HTML表格，上面有图片作为按钮：
<td>
<button class="trigger">
<img src="D:\Elly Research\ CO2858\Presentation\Calypso_map.jpg">
</button>
</td>
<div class="modal">
<div class="modal-content">
<span class="close-button">× </span>
<img src="D:\Elly Research\CO2858\Presentation\Calypso_map.jpg">
<script src="D:\Elly Research\CO2858\Presentation\modal.js"></script>
</div>
</div>这是由脚本控制的：
var modal = document.querySelector(".modal");
var trigger = document.querySelector (".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if(event.target === modal){
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);如果我复制第一张图片的格式，并将其用于同一表格和同一页中的第二张图片，它将停止工作。
JavaScript不像CSS那样工作吗?在CSS中，我可以使用多个ID来控制一个CSS值？
这是我第一次将JavaScript与超文本标记语言和CSS结合使用。
回答 4
Stack Overflow用户
发布于 2018-08-16 03:49:17
我不确定你到底想问什么。基于我的假设，这里有一小段代码。希望能对你有所帮助。
var modal = document.getElementById("modal")
window.addEventListener("click", windowOnClick);
document.querySelector(".close-button").addEventListener("click", toggleModal)
function showImage(event){
toggleModal()
modal.getElementsByTagName("img")[0].src =event.srcElement.src
}
function windowOnClick(event){
if(event.srcElement === modal){
toggleModal()
}
}
function toggleModal(){
modal.classList.toggle("show-modal")
}td > img{
width: 100px;
height: auto;
}
.modal{
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index=10;
}
.show-modal{
display: block !important;
}
.modal-content{
width: 60%;
height: auto;
margin: 0 auto;
}
.close-button{
color: white;
cursor: pointer;
}
#viewer{
width:100%;
height: auto;
}<!doctype>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<img src="https://i.imgur.com/GV6086A.jpg" onclick="showImage(event)" />
</td>
<td>
<img src="https://i.imgur.com/opERcp1.jpg" onclick="showImage(event)" />
</td>
</tr>
<tr>
<td>
<img src="https://i.imgur.com/lieUEvQ.jpg" onclick="showImage(event)" />
</td>
<td>
<img src="https://i.imgur.com/B63gaEQ.jpg" onclick="showImage(event)" />
</td>
</tr>
</table>
<div class="modal" id="modal">
<div class="modal-content">
<span class="close-button">× </span>
<img id="viewer">
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2018-08-16 03:20:28
当您执行document.querySelector(".modal")时，您选择的是具有类"modal“的第一个节点。在本例中，它是包含第一张图片的div。然后，您只将'click'事件添加到第一张图片中。
您可以使用querySelectorAll，它返回所有匹配节点的列表并遍历所有节点来添加'click'事件侦听器，如下所示：
const modals = document.querySelector(".modal");
modals.forEach(modal => {
modal.addEventListener('click', toggleModal)
});Stack Overflow用户
发布于 2018-08-16 03:32:28
如果它是一个小型应用程序，一个简单的解决方案就是创建一个包含其细节的图像对象，如下所示：//Here you can add as many properties you want for the objects images = [{ src: "D:\Elly Research\CO2858\Presentation\Calypso_map.jpg" }, { src: "D:\Elly Research\CO2858\Presentation\Calypso_map_alternative.jpg" }]
然后，您可以遍历它以生成您的表，或者简单地创建带有一些ID引用的表，如<button id="0" class="trigger">，因此您可以使用以下代码在事件对象数组索引中访问它们：
var id = event.target.id因此，要在模型中生成img元素，需要如下所示：function toggleModal(event){ var id = event.target.id; var div = document.getElementsByClassName('modal-content')[0]; div.innerHTML += '<img class="modal-image" src="'+images[id].src+'" />'; modal.classList.toggle("show-modal"); }
但请确保在img元素已经存在的情况下将其销毁：
var child = div.querySelector("img");
if(child != null){
div.removeChild(child);
}希望它能帮助你！！祝你学习顺利！
https://stackoverflow.com/questions/51864644
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号