0

これはJSFiddleです

    $(document).ready(function(){
    $(".red").click(function(){
        $(".red").addClass("selected");
        $(".orange").removeClass("selected");
        $(".yellow").removeClass("selected");
        $(".green").removeClass("selected");
        $(".lightblue").removeClass("selected");
        $(".darkblue").removeClass("selected");
        $(".pink").removeClass("selected");
        $(".brown").removeClass("selected");
        $(".black").removeClass("selected");
        $(".white").removeClass("selected");
    });
    $(".orange").click(function(){
        $(".orange").addClass("selected");
        $(".red").removeClass("selected");
        $(".yellow").removeClass("selected");
        $(".green").removeClass("selected");
        $(".lightblue").removeClass("selected");
        $(".darkblue").removeClass("selected");
        $(".pink").removeClass("selected");
        $(".brown").removeClass("selected");
        $(".black").removeClass("selected");
        $(".white").removeClass("selected");
    });
    $(".yellow").click(function(){
        $(".yellow").addClass("selected");
        $(".orange").removeClass("selected");
        $(".red").removeClass("selected");
        $(".green").removeClass("selected");
        $(".lightblue").removeClass("selected");
        $(".darkblue").removeClass("selected");
        $(".pink").removeClass("selected");
        $(".brown").removeClass("selected");
        $(".black").removeClass("selected");
        $(".white").removeClass("selected");
    });
    $(".green").click(function(){
        $(".green").addClass("selected");
        $(".orange").removeClass("selected");
        $(".yellow").removeClass("selected");
        $(".red").removeClass("selected");
        $(".lightblue").removeClass("selected");
        $(".darkblue").removeClass("selected");
        $(".pink").removeClass("selected");
        $(".brown").removeClass("selected");
        $(".black").removeClass("selected");
        $(".white").removeClass("selected");
    });
    $(".lightblue").click(function(){
        $(".lightblue").addClass("selected");
        $(".orange").removeClass("selected");
        $(".yellow").removeClass("selected");
        $(".green").removeClass("selected");
        $(".red").removeClass("selected");
        $(".darkblue").removeClass("selected");
        $(".pink").removeClass("selected");
        $(".brown").removeClass("selected");
        $(".black").removeClass("selected");
        $(".white").removeClass("selected");
    });
    $(".darkblue").click(function(){
        $(".darkblue").addClass("selected");
        $(".orange").removeClass("selected");
        $(".yellow").removeClass("selected");
        $(".green").removeClass("selected");
        $(".lightblue").removeClass("selected");
        $(".red").removeClass("selected");
        $(".pink").removeClass("selected");
        $(".brown").removeClass("selected");
        $(".black").removeClass("selected");
        $(".white").removeClass("selected");
    });
    $(".pink").click(function(){
        $(".pink").addClass("selected");
        $(".orange").removeClass("selected");
        $(".yellow").removeClass("selected");
        $(".green").removeClass("selected");
        $(".lightblue").removeClass("selected");
        $(".darkblue").removeClass("selected");
        $(".red").removeClass("selected");
        $(".brown").removeClass("selected");
        $(".black").removeClass("selected");
        $(".white").removeClass("selected");
    });
    $(".brown").click(function(){
        $(".brown").addClass("selected");
        $(".orange").removeClass("selected");
        $(".yellow").removeClass("selected");
        $(".green").removeClass("selected");
        $(".lightblue").removeClass("selected");
        $(".darkblue").removeClass("selected");
        $(".pink").removeClass("selected");
        $(".red").removeClass("selected");
        $(".black").removeClass("selected");
        $(".white").removeClass("selected");
    });
    $(".black").click(function(){
        $(".black").addClass("selected");
        $(".orange").removeClass("selected");
        $(".yellow").removeClass("selected");
        $(".green").removeClass("selected");
        $(".lightblue").removeClass("selected");
        $(".darkblue").removeClass("selected");
        $(".pink").removeClass("selected");
        $(".brown").removeClass("selected");
        $(".red").removeClass("selected");
        $(".white").removeClass("selected");
    });
    $(".white").click(function(){
        $(".white").addClass("selected");
        $(".orange").removeClass("selected");
        $(".yellow").removeClass("selected");
        $(".green").removeClass("selected");
        $(".lightblue").removeClass("selected");
        $(".darkblue").removeClass("selected");
        $(".pink").removeClass("selected");
        $(".brown").removeClass("selected");
        $(".black").removeClass("selected");
        $(".red").removeClass("selected");
    });
});

JSFiddle では、完全に正常に動作しており、スムーズに実行および動作しています。ローカルでは、動作が非常に遅く、すべての CSS3 トランジションが途切れ途切れになっています。

誰かが私に何が起こっているのか説明できますか. 完全なコードを確認したい場合は、PasteBinに追加しました。

たくさんの返信ありがとうございます！

4

1 に答える 1

3

10 個の関数を作成し、それぞれに 10 個の jquery オブジェクトを作成し、各関数内で 10 個の関数を呼び出すため、このコードはおそらく低速です。

コードを最適化することは、ここでは良い動きのようです。

また、ID は一意である必要があるboxため、クラスの ID を変更してください。

この場合、私はそれを変更しませんでした。コードを機能させるには、属性で選択する必要がありました。

あなたのコードはこれに減らすことができます：

$(document).ready(function(){
    $("[id=box]").click(function(){
        $('[id=box]').removeClass('selected').filter(this).addClass('selected');
    });
})

後でクラスの ID を変更すると、セレクターは次のようになります$('.box')。

フィドル: http://jsfiddle.net/ErDgF/2/

于 2013-07-07T03:18:28.540 に答える