我实现了一个弹出窗口,当用户点击按钮时显示产品的详细信息,因此弹出窗口应该针对不同的产品显示不同的详细信息。
但是无论点击哪个按钮,弹出窗口总是显示最后一个产品的详细信息。为什么会这样?
CSS:
.cards {
overflow: auto;
white-space: nowrap;
margin-top: 10px;
}
.options a {
margin-left: 10px;
text-decoration: none;
}
.card {
display: inline-block;
margin: 5px;
height: 200px;
}
.bgimg {
height: 410px;
}
.scm a {
text-decoration: none;
}
.fb:hover {
color: #4267B2
}
.insta:hover {
color: #FD1D1D;
}
.gm:hover {
color: #B23121;
}
.centring {
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.popup-hide {
position: fixed;
padding: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 100ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 800px;
max-width: 80%;
display: none;
}
.popup-show {
position: fixed;
padding: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 100ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 800px;
max-width: 80%;
display: block;
}
JS:
function showpopup(params) {
var card = document.getElementsByClassName('card');
var popup;
for (let j = 0; j < card.length; j++) {
popup = document.getElementsByClassName('popup')[j];
popup.style.display = 'block';
}
}
function hidepopup(params) {
var card = document.getElementsByClassName('card');
var popup;
for (let i = 0; i < card.length; i++) {
popup = document.getElementsByClassName('popup')[i];
popup.style.display = 'none';
}
}
HTML:
<div class="container-full" id="container">
<div class="product-cards">
<div class="card" style="width:250px;height: 200px;">
<img class="card-img-top" src="1.jpg" alt="Card image">
<div class="card-body">
<button class="btn btn-primary" id="showpopup" onclick="showpopup()">Open</button>
</div>
</div>
<div class="card" style="width:250px;height: 200px;">
<img class="card-img-top" src="2.jpg" alt="Card image">
<div class="card-body">
<button class="btn btn-primary" id="showpopup" onclick="showpopup()">Open</button>
</div>
</div>
</div>
<div class="product-popups">
<div class="popup-hide popup" id="popup">
<button class="btn btn-primary" id="hidepopup" onclick="hidepopup()">×</button>
<hr>
<div class="row">
<div class="col-sm-4">
<img style="width: 200px;max-width: 90%;" src="1.jpg" alt="">
</div>
<div class="col-sm-8">
price:200DA <br>
<br><br>
</div>
</div>
</div>
<div class="popup-hide popup" id="popup">
<button class="btn btn-primary" id="hidepopup" onclick="hidepopup()">×</button>
<hr>
<div class="row">
<div class="col-sm-4">
<img style="width: 200px;max-width: 90%;" src="2.jpg" alt="">
</div>
<div class="col-sm-8">
price:300DA <br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti, molestiae totam aliquam
quas optio praesentium! Soluta id ea est maxime laudantium, iure voluptatibus voluptatum et nemo
modi reprehenderit bea
tae. Dolorum?
<br><br>
</div>
</div>
</div>
</div>
</div>
</div>
有什么解决问题的建议吗?
最佳答案
你的代码有一些错误:
首先:您将“params”定义为函数的参数,但您没有使用它。
其次:您的 html 代码中有一些标签具有相同的 id,我们对多个标签使用相同的 id 不是有效的“html”
第三:只显示最后一个弹出窗口的原因是您在函数中使用了“for-loop”,这意味着通过单击每个“按钮”,代码循环抛出该类的所有标签,最后显示最后一个。你不需要“for-loop”。您可以使用函数的“params”参数并为弹出窗口提供 id,就像我将发布的代码一样:
function showpopup(params) {
var card= document.getElementsByClassName('card');
var popup;
// for (let j = 0; j < card.length; j++) {
popup=document.getElementById(params);
popup.style.display='block';
// }
}
function hidepopup(params) {
var card= document.getElementsByClassName('card');
var popup;
popup=document.getElementById(params);
popup.style.display= 'none';
}
.cards {overflow: auto;white-space: nowrap;margin-top: 10px;}
.options a {margin-left: 10px;text-decoration: none;}
.card {display: inline-block;margin: 5px; height: 200px ;}
.bgimg {height:410px;}
.scm a {text-decoration: none;}
.fb:hover {color:#4267B2}
.insta:hover {color: #FD1D1D;}
.gm:hover {color: #B23121;}
.centring {margin: auto; display: flex;justify-content: center; align-items: center;}
.popup-hide { position: fixed;
padding: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) ;
transition: 100ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 800px;
max-width: 80%;
display: none;}
.popup-show { position: fixed;
padding: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) ;
transition: 100ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color:white;
width: 800px;
max-width: 80%;
display: block;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pop-up</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-full" id="container">
<div class="product-cards">
<div class="card" style="width:250px;height: 200px;">
<img class="card-img-top" src="1.jpg" alt="Card image">
<div class="card-body">
<button class="btn btn-primary" id="showpopup" onclick="showpopup('pop1')">Open</button>
</div>
</div>
<div class="card" style="width:250px;height: 200px;">
<img class="card-img-top" src="2.jpg" alt="Card image">
<div class="card-body">
<button class="btn btn-primary" id="showpopup" onclick="showpopup('pop2')">Open</button>
</div>
</div>
</div>
<div class="product-popups">
<div class="popup-hide" id="pop1">
<button class="btn btn-primary" id="hidepopup" onclick="hidepopup('pop1')">×</button>
<hr>
<div class="row">
<div class="col-sm-4">
<img style="width: 200px;max-width: 90%;" src="1.jpg" alt="">
</div>
<div class="col-sm-8">
price:200DA <br>
<br><br>
</div>
</div>
</div>
<div class="popup-hide" id="pop2">
<button class="btn btn-primary" id="hidepopup" onclick="hidepopup('pop2')">×</button>
<hr>
<div class="row">
<div class="col-sm-4">
<img style="width: 200px;max-width: 90%;" src="2.jpg" alt="">
</div>
<div class="col-sm-8">
price:300DA <br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti, molestiae totam aliquam
quas optio praesentium! Soluta id ea est maxime laudantium, iure voluptatibus voluptatum et nemo modi reprehenderit bea
tae. Dolorum?
<br><br>
</div>
</div>
</div>
</div>
</div>
<script src="javascript.js"></script>
</body>
</html>
关于javascript - 弹出窗口始终显示相同的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65026668/