JAVASCRIPT Pop-up-Box anzuzeigen

Question

Das ist mein 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 

Das ist mein js ist:

function itemPopup() { 
    var popup = document.getElementById("myPopup"); 
    popup.classList.toggle("show"); 
} 

Wenn ich auf das Bild klicken Sie auf das Pop-up-Shows wie folgt aus:

Egal, ob ich auf das zweite Schwert klicke, die Popup-Box erscheint immer noch auf dem ersten Schwert mit seiner id. Wie behebe ich dieses Problem?

Answer 1

Weisen Sie jeder Iteration Ihres Blades eindeutige IDs zu und übergeben Sie diese ID dann im JavaScript-Funktionsaufruf. Ihr HTML wird so aussehen.

<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> 

Und das JavaScript:

function itemPopup(ID) { 
    var popup = document.getElementById(ID); 
    popup.classList.toggle("show"); 
}