如何解决jQuery 弹出窗口只在 foreach 循环中显示一次
首先,让我解释一下弹出窗口的目的。我有一个来自产品数据库的列表,在 foreach 循环中。
现在我添加了代码,当您单击产品时,它会打开一个新框并显示有关该产品的内容。但出于某种原因,它仅适用于第一个产品。
我会在这里发布代码,因为我在 jQuery/Javascript 方面非常糟糕。这是 jquery 脚本:
function myFunction3() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
刀片
<td>
<div class="popup" onclick="myFunction3()">?️
<span class="popuptext" id="myPopup">
@if ($product->id!==3)
<img src="{{$product->path}}" alt="{{$product->name}}">
@else
<audio controls style="width: 95%">
<source src="\sounds\Pilishpilish.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
@endif
</span>
</div>
</td>
css:
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: -120%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
我知道 Id 应该是唯一的,但我该怎么做
解决方法
您可以做的是将 this
添加到 onclick="myFunction3()"
中,例如 onclick="myFunction3(this)"
然后使用
function myFunction3(obj) {
var popup = obj.children[0];
popup.classList.toggle("show");
}
现在您将点击的元素传递给 myFunction3
,然后您可以使用它来动态切换第一个孩子的类,也就是您的 span
演示
var elements = document.getElementsByClassName("popup");
var myFunction = function() {
var ele = this.children[0]
ele.classList.toggle("show")
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click',myFunction,false);
}
table {
margin: 100px 0 0 100px
}
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: -120%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<div class="popup">?️
<span class="popuptext">
<img src="{{$product->path}}" alt="{{$product->name}}" />
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="popup">?️
<span class="popuptext">
<img src="{{$product->path}}" alt="{{$product->name}}" />
</span>
</div>
</td>
</tr>
</tbody>
</table>
Jquery 解决方案:
$(".popup").click(function() {
var popup = $(".popuptext",this);
popup.toggleClass("show");
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。