页面上不同项目的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>