javascript - 有没有办法在点击时选择数组元素的索引？

Question

我很难在单击时选择数组内元素的特定索引。这是代码的和平，提前致谢!

<div>

 <span class="dot"></span>
 <span class="dot"></span> -- lets say we click on this span
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>

</div>



var dots = document.querySelectorAll(".dot");
for(var i = 0; i < dots.length; i ++){
dots[i].addEventListener("click", function(){
console.log(this) -- prints the actual html <span class="dot"></span>

// ?? How to print index of an element? To be more specific, in this case 
just "1" ??

})
}

Answer 1

实现此目的的一种方法是向您的点添加一个属性(我将其命名为dotIndex)，然后控制台记录此属性。

var dots = document.querySelectorAll(".dot");

for(var i = 0; i < dots.length; i ++){
    dots[i].dotIndex = i;
    dots[i].addEventListener("click", function(){
        console.log(this.dotIndex);
    })
}

检查 fiddle :https://jsfiddle.net/254uqtm0/

但是，正如 Ori Drori 所建议的那样，您只需在循环中将 var 更改为 let 就可以了。如果您对原因感到困惑，请查看此线程:What's the difference between using "let" and "var"?