Question

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

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

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

例如，如果我点击第三个元素，我希望看到2个打印出来（零索引）。

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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

来自jQuery docs的直接解决方案（如果您使用 jQuery 库）这使得 DOM 让您的生活更加简单。

在这种情况下，以下解决方案仍然有效：

$(".exit").click(function() {
  // `this` is the DOM element that was clicked
  var index = $(".exit").index(this);
  alert(index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Click an image!</span>
<h5><img class='exit' src='sampleimage.img'>First image</h5>
<h5><img class='exit' src='sampleimage.img'>Second image</h5>
<h5><img class='exit' src='sampleimage.img'>Third image</h5>

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

2 个答案: