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>

更新：我通过实现slide方法将答案更新为仅包含具有类filter的元素-如果不这样做，索引可能会被非幻灯片的兄弟元素抛弃。

Answer 2

您可以使用.indexOf()和.querySelectorAll()，将div列表和目标作为参数输入。

document.getElementById("slides").addEventListener("click", function(e){
  var nodes = document.querySelectorAll('#slides > .slide');
  console.log([].indexOf.call(nodes, e.target));
});

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

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

2 个答案: