为何使用if/else语句时筛选按钮状态异常，改用多if却正常？

嘿，我来帮你分析这个问题的根源，再给你一套更靠谱的实现方案：

问题出在哪？ #

你说用if/else时多个按钮会同时带active类，但用独立if就正常——核心原因是你用错了jQuery的方法！你写的$completed.has('[class="active"]')是在找这个按钮的子元素里有没有带active类的元素，而不是判断按钮自己有没有这个类！

所以当你用if/else的时候，判断条件根本不成立（因为你的active类直接加在按钮本身上，不是子元素），导致移除其他按钮active类的代码根本没执行，新按钮又加上了active，自然就多个按钮同时高亮了。至于用独立if时看似正常，其实只是巧合，你的判断逻辑本身还是错的。

你的代码里的几个小问题 #

• has()方法用错了：判断元素自身是否有某个类，应该用hasClass('active')，这才是正确的姿势。
• 代码太冗余：三个按钮的事件逻辑几乎一模一样，以后改起来要改三处，太麻烦。
• 判断绕弯路：每次点击都要分别检查另外两个按钮，完全可以简化成一步到位。

优化后的简洁实现 #

我们可以把所有筛选按钮的事件绑定成一个，统一处理active状态，逻辑清晰还不容易出错：

你的HTML不用改 #

<div class="states-filter">
 <p class="state active" id="all"> All </p>
 <p class="state" id="active"> Active </p>
 <p class="state" id="completed"> Completed </p>
</div>

重构后的jQuery代码 #

// 给所有带.state类的按钮绑定点击事件
$('.state').on('click', function() {
  // 第一步：先把所有按钮的active类都移除
  $('.state').removeClass('active');
  // 第二步：只给当前点击的按钮加上active类
  $(this).addClass('active');
  
  // 这里可以加你的筛选逻辑，比如根据按钮id判断要显示哪些内容：
  const filterId = $(this).attr('id');
  if (filterId === 'all') {
    // 显示所有项目的逻辑
  } else if (filterId === 'active') {
    // 显示未完成项目的逻辑
  } else if (filterId === 'completed') {
    // 显示已完成项目的逻辑
  }
});

为什么这个方案更好？ #

• 告别重复代码：不用给每个按钮单独写事件，以后加新筛选按钮也不用改JS。
• 从根源避免重复active：先清空所有active，再给当前按钮加，绝对不会出现多个按钮同时高亮的情况。
• 维护更轻松：筛选逻辑集中在一起，后续修改或扩展都很方便。

如果要保留你原来的写法怎么办？ #

要是你坚持想分开处理每个按钮，那只要把所有has('[class="active"]')改成hasClass('active')，再把判断$all.is('[class!="active"]')改成更直观的!$all.hasClass('active')，你的if/else逻辑就能正常工作了。比如：

$all.on('click', function(){
  if(!$all.hasClass('active')){
    if($completed.hasClass('active')){
      $completed.removeClass('active');
    }
    if($active.hasClass('active')){
      $active.removeClass('active');
    }
    $all.addClass('active');
  }
})

不过还是强烈推荐前面的统一处理方案，代码更简洁健壮哦～

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