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。

在这种情况下，我没有更改它，并且有一个工作代码，我必须按属性选择。

您的代码可以简化为：

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

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

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

什么在本地服务器中放慢这个网页的速度？

1 个答案: