什麼是減慢我的本地服務器中的這個網頁？

Question

這是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。

非常感謝你的回覆！

Answer 1

此代碼可能很慢，因爲您正在創建10個函數，在每個函數中創建10個jquery對象，並在每個函數內部調用10個函數。

優化你的代碼似乎是一個很好的舉措。

此外，id的應該是唯一的，所以更改id爲box的類。

在這種情況下，我沒有改變它，並有一個工作代碼，我不得不通過屬性選擇。

您的代碼可以減少到這一點：如果您更改ID爲一類

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

後來，選擇將這個樣子$('.box')。

小提琴：http://jsfiddle.net/ErDgF/2/