Question

我对JavaScript世界相对较新，并且对您有疑问。我正在做一个简单的JavaScript游戏，当点击一个按钮时，我有几种类型的东西可以改变，添加和删除类。现在我的问题是，这种类型的东西被认为是不好的做法，所有这些列出这样的？有没有更好的办法？或者这完全没问题？

$('#topsbtn').click(function () {
    $(".bluetops").toggleClass('hidetops');
    $(".bluetops").toggleClass('showtops');
    $(".greentops").removeClass('showtops');
    $(".greentops").addClass('hidetops');
    $(".purpletops").removeClass('showtops');
    $(".purpletops").addClass('hidetops');
    $(".redtops").removeClass('showtops');
    $(".redtops").addClass('hidetops');
    $(".pinktops").removeClass('showtops');
    $(".pinktops").addClass('hidetops');
    $(".yellowtops").removeClass('showtops');
    $(".yellowtops").addClass('hidetops');
});

编辑：顶部切换选项，以下是确保在单击此按钮时关闭其他选项。

提前致谢！

Answer 1

这里的最佳实践原则是DRY（不要重复自己）。

您的功能有效，但每当您看到多个方法/操作时，您就应该提取出更多功能（又名abstraction）可扩展性。

希望你继续学习。

Answer 2

如另一个答案中所述，您可以抽象出功能，但在不知道游戏结构的情况下，我只能建议以下内容：使用逗号( thing.something().somethingElse().blah() )添加链接( '.greentops,.redtops' )和组选择器，jQuery将查找他们都是。

$('#topsbtn').click(function () {
    $(".bluetops").toggleClass('hidetops');
    $(".bluetops").toggleClass('showtops');
    // this is a shortcut, you can add multiple classes in the selector and then chain the functions.
    $(".greentops,.purpletops,.redtops,.pinktops,.yellowtops").removeClass('showtops').addClass('showtops');

});

添加/删除/切换类 - 好/坏的做法？

2 个答案: