2

すみません、これは簡単な質問かもしれません。jQuery を使用して最初のナビゲーションを作成しようとしています。アイデアは、ボタンをホバーすると、「選択された」ボタンでない限り、背景色とテキスト色が変化するということです。テキストの色を除いて、これらすべてが正常に機能しています。jQuery の場合と同様に、ループ変数が表示されません。

function testIndex(navIndex){
        for(i=0; i<=4; i++){
            if(i != navIndex){
                $('#nav a:eq('+i+')').hover(function(){
                    $(this).fadeTo('fast', 0.3, function(){
                        $(this).css('background-color','#ff3520');
                        $('#nav li:eq('+i+')').css('color', '#ffffff');
                    }).fadeTo('fast', 1);
                },
                function(){
                    $(this).fadeTo('fast', 0.3, function(){
                        $(this).css('background-color', '#e8e8e8');
                        $('#nav li:eq('+i+')').css('color', '#ff3520');
                    }).fadeTo('fast', 1);
                });
            };  
        };
    };

上で

$('#nav li:eq('+i+')').css('color', '#ff3520');

「i」変数が表示されません。独自の変数を挿入してテストしましたが、動作します。

何かアドバイス？

ありがとう。

4

2 に答える 2

5

iループしているため、ハンドラーで参照を保持するための変数スコープが必要です。

function testIndex(navIndex){
    $.each(Array(5), function(i) {
        if(i != navIndex){
            $('#nav a:eq('+i+')').hover(function(){
                $(this).fadeTo('fast', 0.3, function(){
                    $(this).css('background-color','#ff3520');
                    $('#nav li:eq('+i+')').css('color', '#ffffff');
                }).fadeTo('fast', 1);
            },
            function(){
                $(this).fadeTo('fast', 0.3, function(){
                    $(this).css('background-color', '#e8e8e8');
                    $('#nav li:eq('+i+')').css('color', '#ff3520');
                }).fadeTo('fast', 1);
            });
        }
    });
}

JavaScript では、関数を呼び出すと変数のスコープが作成される$.eachため、配列のインデックスごとに関数を呼び出す for ループを使用しました。

于 2012-08-16T15:22:28.443 に答える
1

コードの問題が何であるか (の範囲) は既に説明されておりi、解決策が提供されています。この関連する質問もご覧ください:ループ内の JavaScript クロージャー – シンプルな実用例.

ただし、インデックスをまったく使用せずに、DOM トラバーサルを使用して、より jQuery 指向の方法で別の方法で解決できます。HTML は次のようになっていると思います。

<ul id="#nav">
    <li><a>...</a></li>
    <li><a>...</a></li>
</ul>

つまり、a要素はli変更したい の子孫です。

次に、次のコードで同じことを実現できます。

function testIndex(navIndex){
    $('#nav a').slice(0,5).not(function(i) { 
        return i === navIndex;
    }).hover(function(){
        $(this).fadeTo('fast', 0.3, function(){
            $(this).css('background-color','#ff3520')
              .closest('li').css('color', '#ffffff');
         }).fadeTo('fast', 1);
    }, function(){
        $(this).fadeTo('fast', 0.3, function(){
            $(this).css('background-color', '#e8e8e8');
              .closest('li').css('color', '#ff3520');
        }).fadeTo('fast', 1);
    });
}
于 2012-08-16T15:45:43.447 に答える