javascript - 在 JavaScript 中使用事件监听器获取子元素的索引

Question

在不更改 HTML 的情况下，如何在单击时获取每个幻灯片容器的索引？

例如。他们点击了 2，我如何获得诸如 node[1] 之类的值？

document.getElementById("slides").addEventListener("click", function(e){
	console.log(e.target);
});

<section id="slides">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
</section>

Answer 1

只要您不在回调中使用箭头函数语法，就可以使用 this 来引用 slides 元素。使用 ES6 扩展语法，您可以将其子元素扩展到一个数组中，然后对该数组使用 indexOf 来获取其中 e.target 的索引:

document.getElementById("slides").addEventListener("click", function(e) {
  const idx = [...this.children]
    .filter(el => el.className.indexOf('slide') > -1)
    .indexOf(e.target);

  if (idx > -1) {
    console.log(`Slide index: ${idx}`);
  }
});

<section id="slides">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <span>Not a slide</span>
  <div class="slide">3</div>
</section>

更新:我通过实现 filter 方法更新了我的答案，以仅包含具有类 slide 的元素 - 否则，索引可能会被非幻灯片的同级元素丢弃。