javascript - 如何在单击时获取 nodeList/HTML 集合中元素的索引

Question

假设我有一个由 var n = document.querySelectorAll('.exit') 产生的 NodeList，它看起来像 [img.exit, img.exit, img.exit, img.exit, img.exit, img.exit]

如您所知，它们都是具有相同类名的相同元素。

我怎么知道我从这个 NodeList 中点击了哪个元素？有没有办法获取事件目标的索引？

例如，如果我单击第三个元素，我希望看到 2 被打印出来(零索引)。

---

上下文是我正在创建一个应用程序，用户可以在其中创建和删除 session 。当用户单击 img.exit 图标时，我想删除整个 session 卡。但为此我需要知道它是哪个 session ，这就是为什么我想将每张 session 卡与其自己的 session ID 相关联。此 session ID 来自请求响应。我能够删除 View 中的卡片，但要在后端从我的日历模型中删除，我需要使用相应的 session ID 发出删除请求。

Answer 1

在 for 循环中创建您的事件监听器，使用 let 而不是 var 声明循环迭代器。

然后您将可以在事件处理程序中访问元素的索引:

var n = document.querySelectorAll('.exit');

for(let e = 0 ; e < n.length ; e++) {
  n[e].addEventListener('click', function() {
    alert(e);
  });
}

<p class="exit">Lorem</p>
<p class="exit">Ipsum</p>
<p class="exit">Hocus</p>
<p class="exit">Pocus</p>