Bootstrap按钮点击切换颜色异常：多按钮同时高亮问题求助

嘿，我懂你现在遇到的麻烦——这些筛选按钮点一个黄一个，之前点的不会变回蓝色，导致多个按钮同时高亮，完全达不到单选筛选的效果对吧？

问题根源 #

你之前的代码是给每个按钮单独绑定点击事件，只切换自身的btn-warning类，完全没管其他按钮的状态，自然就会出现多个按钮同时“选中”的情况。

修复方案（基础单选版） #

我们可以用统一类选择器来处理所有筛选按钮，实现点击一个时自动重置其他按钮的状态：

第一步：修改HTML，给所有筛选按钮加一个共同类

给按钮加上filter-btn类，这样我们就能批量选中它们：

<button type="button" class="btn btn-primary filter-btn" id="first">第一个筛选按钮</button>
<button type="button" class="btn btn-primary filter-btn" id="second">第二个筛选按钮</button>

第二步：优化JS代码，实现互斥状态切换

不用再给每个按钮单独写事件，用共同类绑定一次就行：

// 给所有筛选按钮绑定点击事件
$(".filter-btn").click(function() {
    // 先把所有筛选按钮重置为默认的蓝色（移除warning，添加primary）
    $(".filter-btn").removeClass("btn-warning").addClass("btn-primary");
    // 再把当前点击的按钮切换为黄色（移除primary，添加warning）
    $(this).removeClass("btn-primary").addClass("btn-warning");
    
    // 这里放你原来的筛选数据逻辑，根据按钮ID区分处理
    switch($(this).attr("id")) {
        case "first":
            // 第一个按钮对应的筛选代码
            break;
        case "second":
            // 第二个按钮对应的筛选代码
            break;
        // 后续加新按钮直接在这里加case就行，不用重复写事件
    }
});

进阶版：支持点击已选中按钮取消状态 #

如果需要点击已经变黄的按钮时，让它变回蓝色（取消筛选，显示全部数据），可以稍微调整代码：

$(".filter-btn").click(function() {
    const currentBtn = $(this);
    // 判断当前按钮是否处于选中状态
    const isActive = currentBtn.hasClass("btn-warning");
    
    // 先重置所有按钮的状态
    $(".filter-btn").removeClass("btn-warning").addClass("btn-primary");
    
    // 如果当前按钮之前没选中，就设置为选中；如果已经选中，就保持重置状态（取消选中）
    if (!isActive) {
        currentBtn.removeClass("btn-primary").addClass("btn-warning");
    }
    
    // 筛选逻辑对应调整
    if (!isActive) {
        switch(currentBtn.attr("id")) {
            case "first":
                // 执行first筛选逻辑
                break;
            case "second":
                // 执行second筛选逻辑
                break;
        }
    } else {
        // 取消选中时，执行显示全部数据的逻辑
    }
});

这样处理后，按钮的状态就会完全符合你的预期：每次只有一个按钮是黄色选中状态，或者可以取消选中回到初始状态。

内容的提问来源于stack exchange，提问作者jumpman8947