使用addEventListener和getElementsByClassName傳遞元素ID

Question

我正在定義JSON文件中的項目列表並在網頁上顯示該列表。目的是讓用戶點擊該列表中的任何項目來顯示該項目的更多信息（保存在同一個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> 

我正打算沿

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

在演唱會上線使用的東西與

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

，但我不知道如何將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。

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

你可以從回覆的單擊事件與this.id元素的ID：

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需要添加一個閉合的功能[從外部引用變量的最後一個值範圍]爲每個事件處理函數。