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预加载的对象。当您点击其中任何一个时，会出现以下弹出窗口： 选择数量。 我正在开发elixir和phoenix框架。

Answer 1

为每个项目提供id，并将light和fade从id移至课堂。然后，在执行单击功能时，按项light查找fade和id。请参阅以下示例。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;