JavaScript-删除/添加按钮类

Question

我有一个带有多个按钮的导航窗格(本例简化为两个(

• 按钮1(按钮类别=次要(
• 按钮2(按钮类别=次要(

当单击其中一个按钮时，我需要单击该按钮才能转到按钮类初级，其他按钮才能转到次级。我目前做这件事的方式相当漫长和复杂，我希望有人能让它变得更加无缝。

我的方法

function toggleButton1on(){
$("#Button 1").removeClass("btn btn-space btn-secondary");
$("#Button 2").removeClass("btn btn-space btn-secondary");
$("#Button 1").removeClass("btn btn-space btn-primary");
$("#Button 2").removeClass("btn btn-space btn-primary");
$("#Button 1").addClass("btn btn-space btn-primary");
$("#Button 2").addClass("btn btn-space btn-secondary");
}

function toggleButton2on(){
$("#Button 1").removeClass("btn btn-space btn-secondary");
$("#Button 2").removeClass("btn btn-space btn-secondary");
$("#Button 1").removeClass("btn btn-space btn-primary");
$("#Button 2").removeClass("btn btn-space btn-primary");
$("#Button 2").addClass("btn btn-space btn-secondary");
$("#Button 1").addClass("btn btn-space btn-secondary");
}

Answer 1

一旦修复了选择器问题，听起来你真正需要做的就是切换btn-secondary和btn-primary类，忽略其余的：

function toggleButton1On(){
$("#button1").removeClass("btn-secondary").addClass('btn-primary');
$("#button2").removeClass("btn-primary").addClass('btn-secondary');
}

但是，如果可能的话，在需要时将默认样式应用于按钮(例如，而不是btn-secondary类(, and then simply toggle *on* thebtn primary`类会更有意义：

function toggleButton1On(){
$("#button1").addClass('btn-primary');
$("#button2").removeClass("btn-primary");
}

或者，更普遍地说：

const $btns = $('btn');
$btns.on('click', function() {
$btns.removeClass('btn-primary');
$(this).addClass('btn-primary');
});

Answer 2

元素的id中不应该有空格。而且您不必删除和添加永远不会更改的类。我认为这将使代码看起来更干净。