0

件名：ローラーダービー。私には8つのチームがあり、各チームには4人のプレーヤーがいます。グリッドのページにチームを表示します。4人のプレーヤーがいる8チーム。いずれかのプレーヤーをロールオーバーすると、同じチームのすべてのプレーヤーが点灯します。

このようになります...

XXXXXXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX

各プレイヤーはdivであり、各チームはクラス（ "team1" "team2" "team3" ....）を取得します。各チームをループし、各プレーヤーをネストループして、チームクラス属性を変更する関数を追加するにはどうすればよいですか？

これは私が現在持っているものです（これは機能しますが、「team1」の場合のみ）...

$(document).ready(function() {
        $('.team1').mouseenter(function(){
            $('.team1').css('background-color', '#f79a00');
            $('.defaultTeam').css('background-color', '#8c2559');
        });

        $('.team1').mouseleave(function(){
            $('.team1').css('background-color', '#8c2559');
            $('.defaultTeam').css('background-color', '#f79a00');
        });
});

各チームをハードコーディングすることはできますが、100チームある場合はどうなりますか？これは私が狙っているものです（現在は機能していません）...

$(document).ready(function() {
    for (var t=0;t<9;t++){
        $('.team'+t).mouseenter(function(){
            $('.team'+t).css('background-color', '#f79a00');
            $('.defaultTeam').css('background-color', '#8c2559');
        });

        $('.team'+t).mouseleave(function(){
            $('.team'+t).css('background-color', '#8c2559');
            $('.defaultTeam').css('background-color', '#f79a00');
        });
    }
});

前もって感謝します。

4

1 に答える 1

0

問題はt、mouseenter/leaveハンドラーの無名関数が定義されたときの関数の実行時の値が同じではないことです。

http://www.javascriptkit.com/javatutors/closures.shtmlを参照してください

$(document).ready(function() {
    function me(t){
        return function(){
            $('.team'+t).css('background-color', '#f79a00');
            $('.defaultTeam').css('background-color', '#8c2559');
        }
    }
    function ml(t){
        return function(){
            $('.team'+t).css('background-color', '#8c2559');
            $('.defaultTeam').css('background-color', '#f79a00');
        }
    }
    for (var t=0;t<20;t++){
        $('.team'+t).mouseenter(me(t));     
        $('.team'+t).mouseleave(ml(t));
    }
});
于 2012-10-03T03:54:54.307 に答える