ページ上の異なる項目の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> 

それは作品を、私は数量を選択した場合しかし、それは常にだけ来て最初の項目のためにそれを選択します。

2番目の項目（または他の項目）をクリックすると、最初のポップアップが表示されます。

IDは1つのオブジェクトにのみ使用されるため、これはgetElementByIdを使用しているためです。

getElementsByClassNameに変更しようとしましたが、まったく動作しません。だから、私の質問はそれを動作させる方法です？

クラスを使用することに固執すべきですか？または、何とかクラス内でIDを使用しますか？

私はそれが簡単な質問であればお詫び申し上げますが、私はJSに精通していません。

アドバイスありがとうございます。

編集： ここに私がしていることのためのいくつかの画像があります。これはリストされたオブジェクトのあるページです： これは、リストに表示されたDBから事前にロードされたオブジェクトです。いずれかをクリックすると、このポップアップが表示されます： 数量を選択してください。 私はエリキシルとフェニックスのフレームワークで開発しています。

Answer 1

各項目にidを付け、lightとfadeをidからクラスに移動します。クリック機能を実行すると、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>