javascript - このコードのconsole.logが未定義を返すのはなぜですか？

Question

var el = $('.container');
var anchors = new Array('jobs', 'portfolio', 'docs', 'interier', 'price');
for (var i = 0; i < anchors.length; i++) {
    el.on('click', 'a[href$="#'+anchors[i]+'"]', function (e) {
        e.preventDefault();
        console.log(anchors[i]);
        $.scrollTo('a[name="'+anchors[i]+'"]');
    });
};

Answer 1

その要素をクリックするiと、の値にインクリメントされますanchors.length。

クリックハンドラーにはへの参照がありiます。

JavaScriptでの未解決のプロパティルックアップは。を返しますundefined。

this要素への参照として使用する方がはるかに簡単です。iそれ以外の場合は、値を直接参照するのではなく、値で値を渡す方法を見つけてください。

Answer 2

未定義になる理由は、iが実際にはに等しいため5です。これを見てください：

for ( var i = 0; i < 5; i++ ) {
    console.log( i );
}

そのループが完了した後は、ループiに対してローカルである必要があるため、現時点では未定義であると考えるでしょうfor。残念ながら、そうではありません。これをテストする簡単な方法：

for ( var i = 0; i < 5; i++ ) {
    console.log( i );
}

console.log( i ) // Logs out 5;

簡単に言えば、i++forループのofは、真理テスト部分であるi < 5ビットの後に実行されます。したがって、iがに等しい場合4、ループが実行され、その後、ループが増分されi++、値がi5に設定され、真理テストに失敗します。

これで、iがに等しいことがわかったので、配列で5ルックアップを実行すると、は未定義になります。anchorsanchors[5]

これが重要な理由は、クリックイベントが発生するたびに、キャッシュされた値i5が実行され、その結果、常に未定義のログが記録されるためです。

iこれを修正するには、 likeの値のエイリアスを作成します。

var el = $('.container');
var anchors = new Array('jobs', 'portfolio', 'docs', 'interier', 'price');

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

    // By passing the value to this self executing function,
    // it creates a new instance of the variable
    ( function ( index ) {
        el.on('click', 'a[href$="#'+anchors[index]+'"]', function (e) {
        e.preventDefault();
            console.log(anchors[index]);
            $.scrollTo('a[name="'+anchors[index]+'"]');
        });
    })( i );

};

Answer 3

変数iは最後のループの値を取得しました。アンカーにアクセスする場合は、次を使用できます。

 console.log($(this).attr('href').substr(1));