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从事件监听器传递给print函数以确定要打印的细节。

我在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在评论中指出的那样，如果您要支持的浏览器符合最新版本的JavaScript的ECMAScript 6（ES6），则可以使用以下内容。

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 3

这就是我要做的。我将首先使用对象值创建一个数组。

const userSelection = Object.values(document.getElementsByClassName('menu'));

然后我将使用foreach遍历它们。

userSelection.forEach(link => {
    link.addEventListener(event => {
        event.preventDefault();
        // more code here
    });
});

轻松自如！

Answer 4

您可以将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>

更新：如果变量是在事件处理程序之外定义的，当我们单击时，我们将获得它设置的最后一个值。所以需要添加一个闭包 - 一个函数[引用外部作用域的变量] for每个事件处理函数。

使用addEventListener和getElementsByClassName传递元素id

4 个答案: