Question

这是我的第一个问题所以请不要讨厌我:) 试图寻找它，但我无法找到我需要的东西。如何使用已单击的类.circle打印div的索引？ Here's my code

var circle = document.querySelectorAll(".circle");

for(i=0; i<circle.length; i++){

 circle[i].addEventListener("click", function(){
   this.classList.toggle("hide");
   console.log(circle.indexOf(this));
 })
}

谢谢！

Answer 1

确保在let循环中使用for并console.log(i)

var circle = document.querySelectorAll(".circle");

for(let i=0; i<circle.length; i++){

 circle[i].addEventListener("click", function(){
   this.classList.toggle("hide");
   console.log(i);
 })
}

Answer 2

只需稍加改动：只需将NodeList转换为数组（数组有一个indexOf函数）：

 var circle = Array.from(document.querySelectorAll(".circle"));

Try it

或者，您可以简单地获取迭代的索引：

 var circle = document.querySelectorAll(".circle");

for(let i=0; i<circle.length; i++){
 circle[i].addEventListener("click", function(){
   this.classList.toggle("hide");
   console.log(i);
  })
}

Answer 3

如果通过“index”表示其querySelectorAll调用返回的集合中的索引，则可以使用querySelectorAll的{{1}}（这是相对较新的，但可填充的）：

forEach

Answer 4

由于您使用i作为迭代器遍历元素，因此只需在i循环中使用let将for声明为另一个变量，然后就可以了只需使用console.log(i)来显示每个圈子的索引：

var circle = document.querySelectorAll(".circle");

for(let i=0; i<circle.length; i++){

    circle[i].addEventListener("click", function(){
        this.classList.toggle("hide");
        console.log(i);
    })
}

Answer 5

可能对某人有用，在ES5中使用闭包的相同解决方案：

var circle = document.querySelectorAll(".circle");

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

JavaScript查找div的索引

5 个答案: