jquery - 是什么使我的本地服务器上的该网页变慢？

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

非常感谢您的所有答复！

最佳答案

这段代码可能很慢，因为您要创建10个函数，在每个函数中创建10个jquery对象，然后在每个函数中调用10个函数。

优化代码似乎是一个不错的选择。

另外，ID应该是唯一的，因此请更改类的ID box。

在这种情况下，我没有更改它，并且要使用有效的代码，我必须按属性进行选择。

您的代码可以简化为：

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

以后，如果您更改类的ID，选择器将显示为$('.box')。

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