javascript - 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");
}

标签： javascriptclassbutton

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* the btn-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');
});