基于jQuery实现点击元素切换active与inactive状态

嘿，我懂你想要的效果——点击盒子就能切换它的 active/inactive 状态，而不是现在这种只能单选激活的逻辑对吧？你提到的基于布尔值的实现其实很直接，核心就是用 jQuery 的 hasClass() 方法（它会返回 true 或 false 这个布尔值）来判断当前盒子的状态，再做对应的操作。

我给你分两种常见场景来写方案：

场景1：每个盒子独立切换状态（可多选激活） #

如果你希望每个盒子都能自己单独切换激活/非激活，互不影响，那可以这样写：

$(".box").click(function(){
  const currentBox = $(this);
  // 用 hasClass 获取布尔值，判断当前盒子是否已经激活
  const isActive = currentBox.hasClass("active");
  
  if (isActive) {
    // 如果已经激活，就移除active类
    currentBox.removeClass("active");
  } else {
    // 如果未激活，就添加active类
    currentBox.addClass("active");
  }
  
  // 其实jQuery有更简洁的封装：currentBox.toggleClass("active");
  // 上面的判断写法是帮你理解布尔值的逻辑，实际开发用toggleClass更高效
});

这里的关键就是 isActive 这个布尔变量，它直接决定了我们要执行添加还是移除类的操作。

场景2：保持单选逻辑，但允许取消当前激活的盒子 #

如果你还是想要同一时间最多只有一个盒子激活，但允许点击已激活的盒子来取消它的状态（变成没有盒子激活），那可以修改你原来的代码：

$(".box").click(function(){
  const currentBox = $(this);
  const wasActive = currentBox.hasClass("active"); // 先记录当前状态的布尔值
  
  // 先移除所有盒子的active类
  $(".box").removeClass("active");
  
  // 如果原本未激活，才给当前盒子添加active；如果原本已激活，就什么都不做（相当于取消）
  if (!wasActive) {
    currentBox.addClass("active");
  }
});

这个逻辑里，我们先把点击前的状态用布尔值存下来，然后统一清空所有激活状态，再根据之前的状态决定是否要激活当前盒子——完美实现“点击激活，再次点击取消”的单选效果。

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