JavaScriptのインデックスを見つける

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

forループにletを使用してください。ちょうど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

ほんの少しの変更：単純に配列（配列はindexOfの機能を持っている）へのNodeListを変換：

：

また

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

「インデックス」による場合は、そのquerySelectorAll呼び出しによって返されたコレクション内のインデックスを意味し、あなたが使用することができますquerySelectorAllのforEach（比較的新しいが、polyfillableである）：ので

var circle = document.querySelectorAll(".circle"); 
circle.forEach(function(circle, index) { 
circle.addEventListener("click", function(){ 
    this.classList.toggle("hide"); 
    console.log(index); 
}); 

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); 
}