javascript - 无法获得点击幻灯片的正确索引

Question

我正在为滑块编写此函数，当我单击要获取其索引的幻灯片时。

当我记录clickedSlide它输出正确的幻灯片，但由于某种原因clickedSlideIndex只返回奇数索引号（1、3、5等）

slides.forEach(slide => slide.onclick = handleSlideClick);

function handleSlideClick() {
    let clickedSlide = event.target;
    let clickedSlideIndex = Array.prototype.indexOf.call(clickedSlide.parentNode.childNodes, clickedSlide);

    // some stuff..
}

我错过了什么？

Answer 1

奇数索引号可以用下面的例子来解释：

document.getElementById('slides').onclick=handleSlideClick;

function handleSlideClick() {
  let clickedSlide = event.target;
  let clickedSlideIndex= Array.prototype.indexOf.call(clickedSlide.parentNode.childNodes, clickedSlide);
  console.log(clickedSlide,clickedSlideIndex);
}

.slide {display:inline-block}

<div id="slides">
 <div class="slide">one</div>&nbsp;
 <div class="slide">two</div>&nbsp;
 <div class="slide">three</div>&nbsp;
 <div class="slide">four</div>&nbsp;
 <div class="slide">five</div>&nbsp;
 <div class="slide">six</div>&nbsp;
</div>

这里每个div.slide后面都有一个 （“非中断空间”）节点。在索引计数中，这个小实体也很重要！如果您想避免这种情况发生，您可以替换.childNodes为.children：

document.getElementById('slides').onclick=handleSlideClick;

function handleSlideClick() {
  let clickedSlide = event.target;
  let clickedSlideIndex= Array.prototype.indexOf.call(clickedSlide.parentNode.children, clickedSlide);
  console.log(clickedSlide,clickedSlideIndex);
}

.slide {display:inline-block}

<div id="slides">
 <div class="slide">one</div>&nbsp;
 <div class="slide">two</div>&nbsp;
 <div class="slide">three</div>&nbsp;
 <div class="slide">four</div>&nbsp;
 <div class="slide">five</div>&nbsp;
 <div class="slide">six</div>&nbsp;
</div>

Answer 2

你可以试试这样

slides.forEach((slide, index) => {
   slide.onclick = () => handleSlideClick(index)
});

function handleSlideClick(index) {
    
   console.log(index) // prints the index

    // some stuff..
}