addEventListenerとgetElementsByClassNameを使用して要素IDを渡す

Question

JSONファイルからアイテムのリストを定義し、そのリストをWebページに表示します。ユーザーがそのリスト内の項目をクリックすると、その項目に関する詳細情報（同じJSONファイルに保持されている情報）が表示されます。

このリストのすべての項目は同じクラスのメンバーであり、それぞれにJSONファイルから定義された一意のIDがあります。 HTMLは次のようになります。

<ul> 
    <li class="menu" id="bob">Robert Smith</li> 
    <li class="menu" id="jane">Jane Doe</li> 
    <li class="menu" id="sue">Susan Carter</li> 
</ul> 

私は

userSelection.addEventListener('click', myFunctionToPrintDetails());

でのコンサートで

var userSelection = document.getElementsByClassName('menu');

の線に沿って何かを使用することを計画していたが、私はわかりません印刷する詳細を決定するためにイベントリスナーから印刷関数にidを渡す方法。

私はHTML/CSSで多くの経験を持っていますが、JSON/AJAXではほとんど経験がありませんので、私はこれを完全にベースにしていきます。これを行うためのより適切な方法がある場合は、フィードバックに公開しています。

私は両方の答えを試しましたが、いずれもうまくいきませんでした。私がuserSelection.lengthをコンソールに記録すると、私は0を取得します。私はuserSelectionをログインしたときに私が取得：

HTMLCollection(0) 
> sue: li#sue.menu 
length: 3 
> jane: li#jane.menu 
> bob: li#bob.menu 
> 0: li#bob.menu 
> 1: li#jane.menu 
> 2: li#sue.menu 

Answer 1

codepen demo

var userSelection = document.getElementsByClassName('menu'); 

for(var i = 0; i < userSelection.length; i++) { 
    (function(index) { 
    userSelection[index].addEventListener("click", function() { 
     console.log("Clicked index: " + index); 
    }) 
    })(i); 
} 

としてはコメントで@torazaburoによって指摘あなたがサポートするブラウザがECMAScriptの6（に準拠している場合は、次のように使用することができますES6）は、JavaScriptの最新バージョンです。あなたがthis.idでクリックイベントに応答した要素からIDを取得することができます

var userSelection = document.getElementsByClassName('menu'); 

for(let i = 0; i < userSelection.length; i++) { 
    userSelection[i].addEventListener("click", function() { 
    console.log("Clicked index: " + i); 
    }) 
} 

Answer 2

：

var items = document.getElementsByClassName('menu'); 
 
for (var i = 0; i < items.length; i++) { 
 
    items[i].addEventListener('click', printDetails); 
 
} 
 

 
function printDetails(e) { 
 
    console.log("Clicked " + this.id); 
 
}

<ul> 
 
    <li class="menu" id="bob">Robert Smith</li> 
 
    <li class="menu" id="jane">Jane Doe</li> 
 
    <li class="menu" id="sue">Susan Carter</li> 
 
</ul>

Answer 3

あなたは一つの変数にストアによってyour idを渡し、a parameterとして渡すことができます...

var userSelection = document.getElementsByClassName('menu'); 
 
for(var i = 0;i<userSelection.length;i++){ 
 
var cur_id = userSelection[i].id; 
 
(function(id) { 
 
    userSelection[i].addEventListener('click', detail); 
 
    })(cur_id); 
 
} 
 
function detail(){ 
 
    alert(this.id); 
 
    }

<ul> 
 
    <li class="menu" id="bob">Robert Smith</li> 
 
    <li class="menu" id="jane">Jane Doe</li> 
 
    <li class="menu" id="sue">Susan Carter</li> 
 
</ul>

更新：変数はイベントハンドラの外で定義されている場合は、ときに我々は、我々はそれが外から変数を参照する閉鎖機能[を追加する必要がto.So設定された最後の値を取得しますクリックスコープ]を設定します。