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 回答