JAVASCRIPT弹出框显示

Question

这是我的 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。如何解决这个问题？

Answer 1

为 Blade 的每次迭代分配唯一的 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");
}