在不更改 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>
最佳答案
只要您不在回调中使用箭头函数语法,就可以使用 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
的元素 - 否则,索引可能会被非幻灯片的同级元素丢弃。
关于javascript - 在 JavaScript 中使用事件监听器获取子元素的索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54737958/