javascript - 页面不同项目的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 不太熟悉。

任何建议表示赞赏。

编辑:这是我正在做的事情的一些图像。这是列出对象的页面: 这些是从列表中显示的数据库预加载的对象。当您单击其中任何一个时，会出现以下弹出窗口: 选择数量。我正在 Elixir 和 phoenix 框架中进行开发。

Answer 1

为每个项目提供id，并将light和fade从id移至类。然后，在执行click函数时，通过item 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>