javascript - 使用模态将多个单击的图像替换为新图像
问题描述
自从我使用 JS 以来已经有一段时间了,我在创建这个多模态 img 时遇到了问题。
我正在遵循本指南。
模态脚本正在正常工作。如果我点击雪景图像,它会打开带有不同图像(火)的模态,但我真正需要的是能够点击不同的图像,确切地说是 10 个,并使用不同于我选择的第一个。
例如,如果我点击 image1 > image1.1 打开。如果我单击 image2 > image2.2 打开,依此类推。
关于如何解决这个问题的任何线索?
有人说我应该使用 ForEach 方法,并编辑函数 img.onclick = function(){...} 但我已经尝试过,不知道应该在哪里或如何做。
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
let default_image = this.src;
modal.style.display = "block";
this.src = 'https://upload.wikimedia.org/wikipedia/commons/3/36/Large_bonfire.jpg';
modalImg.src = this.src;
this.src = default_image;
captionText.innerHTML = this.alt;
}
// 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";
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<img id="myImg" src="https://upload.wikimedia.org/wikipedia/commons/1/12/CargoNet_Di_12_Euro_4000_L%C3%B8nsdal_-_Bolna.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
解决方案
您可以创建一个 dict 指定要加载的 img,具体取决于单击了哪个 img。
然后,您可以选择所有具有公共类的 imgs 并映射,然后创建打开的模态函数。
在每个函数中,您将 dict 值与您要加载的 src 一起传递。
在这个例子中,我使用了 title 属性来传递新的 src。我还给了你的img
标签类myImg
来映射。
modalImgs = {'catImg':'https://i.pinimg.com/originals/0c/1c/a1/0c1ca1955e2b0c5469ba17da2b1b9b96.jpg', 'dogImg': 'https://filmdaily.co/wp-content/uploads/2020/05/dog-videos-lede-1300x868.jpg'}
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var imgs = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
Object.keys(imgs).map(function(objectKey) {
var img = imgs[objectKey];
img.onclick = function() {
modal.style.display = "block";
modalImg.src = modalImgs[this.id]
captionText.innerHTML = this.alt;
}
})
// 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";
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<img class="myImg" id="catImg" src="https://i.pinimg.com/originals/4b/6f/ec/4b6fec352ad65acf6c1265201432dfa1.jpg" alt="Cat" style="width:100%;max-width:300px">
<img class="myImg" id="dogImg" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/16B90/production/_107427039_gettyimages-636475496.jpg" alt="Dog" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
推荐阅读
- javascript - 如何在现有的 Angular 项目中使用 React 组件?
- python - Python - 通过传递带有模型名称的字符串作为输入来获取 Scikit-Learn 分类器
- python - 使用 TensorFlow 对象检测 API eval.py 获取 mAP
- reactjs - 如何修复“在 DragSource(Component) 的上下文中找不到拖放管理器”
- javascript - 用 javascript 替换模板中的文本
- android - Android 为 EditText 设置新的行和长度限制
- angular - 有没有办法将编译的角度生产应用程序与过时的开发源进行比较?
- dart - 资产文件夹中的 Flutter Excel 工作表
- build - 在 dotnet 构建时不断收到警告 MSB3245
- javascript - 如何使用通向另一个表单的 Next Button 或 Tab 创建多个表