JAVASCRIPT弹出框显示
[英]JAVASCRIPT pop up box display
提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。
问题描述
这是我的html：
<div class="popup" onclick="itemPopup()">
<img src="{{$item->item->img}}">
<span class="popuptext" id="myPopup">
{{$item->title}}<br>
<a href="/sell-item/{{$item->id}}" class="btn-sm btn-danger" style="text-decoration: none">
Sell for {{$item->price/2}} <img src="/img/gold.png"></a><br>
<p>{{$item->description}}</p>
</span>
</div>
@endforeach
这是我的js：
function itemPopup() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
当我单击图像时，弹出窗口显示如下：
无论我是否单击第二把剑，弹出框仍将显示在第一把剑上，其id 。 如何解决这个问题？
1 条回复
1楼 Claudio Pinto 1 已采纳 2017-07-22 11:54:44
为刀片的每次迭代分配唯一的ID，然后在JavaScript函数调用中传递相同的ID。 您的HTML将如下所示。
<div class="popup" onclick="itemPopup('myPopup{{$item->id}}')">
<img src="{{$item->item->img}}">
<span class="popuptext" id="myPopup{{$item->id}}">
{{$item->title}}<br>
<a href="/sell-item/{{$item->id}}" class="btn-sm btn-danger" style="text-decoration: none">
Sell for {{$item->price/2}} <img src="/img/gold.png"></a><br>
<p>{{$item->description}}</p>
</span>
</div>
和JavaScript：
function itemPopup(ID) {
var popup = document.getElementById(ID);
popup.classList.toggle("show");
}
问题未解决？试试搜索： JAVASCRIPT弹出框显示。
JavaScript弹出框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.