2

私は3つのリンクのリストを持っています.3つのリンクを反復したいので、それぞれが何かをすることができます. しかし、for ループを使用すると3、コンソールに表示されるのは、リスト内のリンクの数だけです。コンソールにそれぞれを次のように表示したい: 0, 1, 2;

また、各リンクのインデックス位置を取得するにはどうすればよいですか?

ここのコードを参照してください: http://jsfiddle.net/c8Wdj/

jQueryやライブラリはありません...

JavaScript:

(function(){
    var triggers = document.getElementById('some-list').getElementsByTagName('a');

    for (var i = 0, max = triggers.length; i < max; i += 1) {
        triggers[i].addEventListener('mouseenter', function(e) {

            console.log(i);

        }, false);
    }

}());

HTML:

<ul id="some-list">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>​

</p>

4

2 に答える 2

3

for にはスコープがないため、console.log(i) を実行すると、i の最新の値が使用されます。これを試して：

for (var i = 0, max = triggers.length; i < max; i += 1) {
    (function(num){
        triggers[i].addEventListener('mouseenter', function(e) {
            console.log(num);
        }, false);
    })(i);
}
于 2012-05-26T16:45:42.700 に答える
0

i一般的なアプローチは、関数を呼び出して関数に渡し、その値を参照する関数を返すことによって、ループの反復ごとに新しい変数スコープを作成することです。

ただし、数値などの軽量データを参照する必要があるだけの場合は、単純に要素に expando プロパティを配置する別の方法があります。

for (var i = 0, max = triggers.length; i < max; i += 1) {
    triggers[i].__i__ = i;
    triggers[i].addEventListener('mouseenter', function(e) {
        console.log(this.__i__);
    }, false);
}

これには、ネストされた変数スコープのオーバーヘッドは必要ありません。

デモ: http://jsfiddle.net/c8Wdj/5/

IE6 の問題かもしれませんが (覚えていません)、JS 環境をもうサポートしていないことを願っているので、それは問題ではありません。:)

于 2012-05-26T16:59:36.890 に答える