JS Pop-up für verschiedene Artikel auf Seite

Question

Ich versuche, ein Pop-up für jeden Artikel in meiner App, um die Menge zu wählen.

So lädt es mehrere Elemente auf der Seite vor, und ich muss es Pop-up-anzeigen, wenn Sie auf eines von ihnen klicken.

fand ich diese Lösung und versuchte es:

<div class="items"> 
    <div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity()"> 
     <%= item.name %> 
    </div> 

    <div id="light" class="itemshowcontent"> 
     <p>Some content</p> 
     <a href = "javascript:void(0)" onclick = "closeitemquantity()">Close</a> 
    </div> 

    <div id="fade" class="blackoverlay"></div> 
</div> 

wo js:

<script> 
    function itemquantity() { 
     document.getElementById('light').style.display='block'; 
     document.getElementById('fade').style.display='block' 
    } 
    function closeitemquantity() { 
     document.getElementById('light').style.display='none'; 
     document.getElementById('fade').style.display='none' 
    } 
</script> 

Es funktioniert, aber wenn ich Menge auswählen, es immer nur für den ersten Punkt auswählt, kommt.

Wenn Sie auf das zweite Element (oder ein anderes) klicken, ist das Pop-up immer noch für das erste.

Ich glaube, das ist, weil ich getElementById verwende, da ID nur für ein Objekt verwendet wird.

Ich habe versucht, zu GetElementsByClassName zu ändern, aber dann funktioniert es überhaupt nicht. Also, meine Frage ist, wie es funktioniert?

Sollte ich bei Klassen bleiben bleiben? Oder irgendwie ID verwenden, innerhalb der Klassen?

Ich entschuldige mich, wenn es eine einfache Frage ist, ich bin nicht wirklich vertraut mit JS.

Jeder Ratschlag geschätzt.

EDIT: Hier sind einige Bilder für das, was ich mache. Dies ist die Seite mit aufgelisteten Objekten: Dies sind die Objekte, die aus der DB geladen sind und in einer Liste angezeigt werden. Wenn Sie auf eines von ihnen klicken, erscheint dieses Popup: , um die Menge auszuwählen. Ich entwickle mich im elixir und phoenix Framework.

Answer 1

Geben Sie id zu jedem Element und verschieben light und fade aus id und zu Klasse. Dann finden Sie light und fade von Element id, wenn Klick-Funktion ausgeführt wird. Siehe das folgende Beispiel.

function getParent(itemChild) { // Get parent. 
 
    var item = itemChild.parentElement; 
 
    return item; 
 
} 
 
function itemquantity(itemChild) { 
 
    var item = getParent(itemChild); // Get parent and it is the item. 
 
    item.querySelector('.light').style.display='block'; // Find .light element as of item. 
 
    item.querySelector('.fade').style.display='block'; // Find .fade element as of item.  
 
} 
 
function closeitemquantity(itemChild) { 
 
    var item = getParent(getParent(itemChild)); // You have to get parent twice and that is the item. 
 
    item.querySelector('.light').style.display='none'; // Find .light element as of item. 
 
    item.querySelector('.fade').style.display='none'; // Find .fade element as of item.  
 
}

<div class="items" id="apple"> 
 
    <div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity(this)"> 
 
    Apple 
 
    </div> 
 

 
    <div class="light itemshowcontent"> 
 
    <p>Red Apple</p> 
 
    <a href = "javascript:void(0)" onclick = "closeitemquantity(this)">Close</a> 
 
    </div> 
 

 
    <div class="fade blackoverlay"></div> 
 
</div> 
 

 
<div class="items" id="banana"> 
 
    <div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity(this)"> 
 
    Banana 
 
    </div> 
 

 
    <div class="light itemshowcontent"> 
 
    <p>Yello Banana</p> 
 
    <a href = "javascript:void(0)" onclick = "closeitemquantity(this)">Close</a> 
 
    </div> 
 

 
    <div class="fade blackoverlay"></div> 
 
</div>