如何在不重复javascript代码的情况下添加多个模态

Question

我已经向我的网站添加了模态，并包含了正在运行的for循环，但问题是两个模态显示的内容相同，但它们应该显示不同的内容。如何在不重复Javascript中的自我的情况下修复此问题。

var modal = document.getElementById("myModal");
var btn = document.getElementsByClassName("chimpDet");
var span = document.getElementsByClassName("close")[0];

for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
modal.style.display = "block";
}
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

.chimps {
margin-left: 20px;
height: 150px;
width: 250px;
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
}
.chimpDet {
background-color: rgba(0, 128, 0, 0.5);
cursor: pointer;
}
.chimpImg {
height: 150px;
width: 250px;
}
.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.4);
/* Black w/ opacity */
}

/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}

/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.saveBtn {
background-color: green;
border: none;
height: 50px;
width: 250px;
cursor: pointer;
color: white;
font-size: 20px;
}
.gig {
display: flex;
}
.cIB {
display: flex;
flex-direction: column;
}

<div class="chimps">
<div class="chiM">
<div class="chimpDet">
<img class="chimpImg" src="https://via.placeholder.com/250x150" alt="">
<h3>AFRIKA</h3>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
<h2>Welcome to Afrika's Diary</h2>
</div>
<div class="modal-body">
<form action="">
<div class="gig">
<div>
<textarea name="" id="" cols="90" rows="20"></textarea>
</div>
<div class="cIB">
<img class="chimpImg" src="https://via.placeholder.com/250x150" alt="">
<button class="saveBtn">Save</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<h3>Afrika</h3>
</div>
</div>
</div>
</div>
<div class="chiM">
<div class="chimpDet">
<img class="chimpImg" src="https://via.placeholder.com/250x150" alt="">
<h3>Asega</h3>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
<h2>Welcome to Asega's Diary</h2>
</div>
</div>
</div>
</div>
</div>

Answer 1

一个ID在一个页面上只能使用一次(必须是唯一的(，因此有两个ID为"myModal"；不会起作用。幸运的是，你不需要这些身份证，很容易就能获得"；下一个"；元素，恰好是您要打开的模态。

for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
let modal = this.nextElementSibling;
modal.style.display = "block";
}
}

Answer 2

最好的脚本根本不依赖于ID。我可能会在DOM节点列表中收集按钮和模态，并使用DOM遍历打开正确的模态。

const modalBtns = document.querySelectorAll('.chimpDet');
const modals = document.querySelectorAll('.modal');
const closeBtns = document.querySelectorAll('.close');
// open next sibling modal on button click
modalBtns.forEach(function(btn) {
btn.onclick = function() {
btn.nextElementSibling.style.display = "block";
}
});
// close all modals on any close button click
closeBtns.forEach(function(btn) {
btn.onclick = function() {
modals.forEach(function(modal) {
modal.style.display = "none";
});
}
});
// close all modals on modal wrapper click
window.onclick = function(event) {
if (Array.from(modals).includes(event.target)) {
modals.forEach(function(modal) {
modal.style.display = "none";
});
}
}

.chimps {
margin-left: 20px;
height: 150px;
width: 250px;
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
}
.chimpDet {
background-color: rgba(0, 128, 0, 0.5);
cursor: pointer;
}
.chimpImg {
height: 150px;
width: 250px;
}
.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.4);
/* Black w/ opacity */
}

/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
animation-name: animatetop;
animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}

/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.saveBtn {
background-color: green;
border: none;
height: 50px;
width: 250px;
cursor: pointer;
color: white;
font-size: 20px;
}
.gig {
display: flex;
}
.cIB {
display: flex;
flex-direction: column;
}
textarea {
max-width: 100%;
}

<div class="chimps">
<div class="chiM">
<div class="chimpDet">
<img class="chimpImg" src="https://via.placeholder.com/250x150" alt="">
<h3>AFRIKA</h3>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
<h2>Welcome to Afrika's Diary</h2>
</div>
<div class="modal-body">
<form action="">
<div class="gig">
<div>
<textarea name="" id="" cols="90" rows="20"></textarea>
</div>
<div class="cIB">
<img class="chimpImg" src="https://via.placeholder.com/250x150" alt="">
<button class="saveBtn">Save</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<h3>Afrika</h3>
</div>
</div>
</div>
</div>
<div class="chiM">
<div class="chimpDet">
<img class="chimpImg" src="https://via.placeholder.com/250x150" alt="">
<h3>Asega</h3>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
<h2>Welcome to Asega's Diary</h2>
</div>
</div>
</div>
</div>
</div>