頁面上不同項目的JS彈出窗口

Question

我正在嘗試為我的應用程序中的每個項目彈出一個窗口以選擇數量。

因此，它會在頁面上預加載幾個項目，並且我需要在單擊其中任何一個項目時使其顯示彈出窗口。

我找到了此解決方案並嘗試了它：

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

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

它可以工作，但是當我選擇數量時，它總是只為出現的第一個項目選擇它。

如果單擊第二個項目（或其他任何項目），則彈出窗口仍然是第一個項目。

我相信這是因為我使用getElementById，因為ID僅用於一個對象。

我嘗試將其更改為getElementsByClassName，但是那根本不起作用。 所以，我的問題是如何使其工作？

我應該堅持使用類嗎？ 還是以某種方式在類中使用ID？

如果這是一個簡單的問題，我很抱歉，我對JS並不是很熟悉。

任何建議表示贊賞。

編輯：這是我在做什么的一些圖像。 這是列出對象的頁面： 這些是列表中從DB預加載的對象。 當您單擊其中任何一個時，將彈出以下彈出窗口： 選擇數量。 我正在開發長生不老葯和鳳凰框架。

Answer 1

為每個項目指定id ，並移動light並從id和類中fade 。 然后，在執行點擊功能時按項目id查找light和fade 。 請參見以下示例。

 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>