は未定義

Question

の「CLASSLIST」プロパティを読み取ることができません。私はシンプルなスライダーを行うにしようとしていますが、私は私にこの問題があります。

Uncaught TypeError: Cannot read property 'classList' of undefined 

これは私のコードです：

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

for(var i = 0; i < 6; i++){ 
    div[i].onclick = function() { 
     this.classList.remove("active"); 
     div[i+1].classList.add("active"); 
    } 
} 

は、いずれかを助けることができます私はどうですか？

Answer 1

私は外側の関数にスコープされているので、このように思えるので、常にiの最大値に設定されます。このため、div[i + 1]は常に未定義です。何あなたができることは次のとおりです。

div[i].onclick = function(idx) { 
    this.classList.remove("active"); 
    if(idx < div.length - 1) div[idx + 1].classList.add("active"); 
}.bind(div[i], i); 

何バインドすることは、あなたが関数に渡された変数の値のスナップショットだけでなく、「この」の値をとります。 "this"の値が最初に来ると、関数の引数がそれに続きます。次に、呼び出された関数を返します。引数のいくつかのサブセットは、指定した値にバインドされています。バインドされていない引数はすべて呼び出し元によって提供されますが、すべてのバインドされた引数は呼び出し元によって指定された引数の前に来なければなりません。