jQuery中如何按条目ID使用toggleClass切换单个按钮样式

问题原因 #

你当前使用$(".btn-add")作为选择器，会匹配页面上所有带有btn-add类的按钮，因此执行类切换操作时会作用到全部按钮上，这是点击一个按钮全部变绿的核心原因。

解决方案 #

方案1：最小改动适配现有写法

修改你按钮的onclick属性，将当前点击元素本身作为参数传入函数：

<a class="btn btn-default btn-add" onclick='select_item({{item.id}}, this)'>
    <i class="fa fa-fw fa-square-o"></i>
</a>

对应修改select_item函数的实现：

function select_item(itemId, currentEl) {
  // 仅针对当前点击的按钮切换类
  $(currentEl).toggleClass("btn-default btn-success");
  // 可选：同步切换复选框图标
  $(currentEl).find("i").toggleClass("fa-square-o fa-check-square-o");
  
  // 此处保留你原本需要用itemId处理的业务逻辑
}

方案2：更易维护的事件绑定写法（推荐）

移除HTML内的onclick内联事件，用data属性存储条目ID：

<a class="btn btn-default btn-add" data-item-id="{{item.id}}">
    <i class="fa fa-fw fa-square-o"></i>
</a>

改用jQuery事件绑定的方式处理点击逻辑，适配动态加载的条目场景：

// 如果条目是动态渲染的，可将前面的document选择器替换为你列表的父容器，比如$("#item-list")
$(document).on("click", ".btn-add", function() {
  const itemId = $(this).data("item-id");
  // 仅修改当前点击的按钮
  $(this).toggleClass("btn-default btn-success");
  // 可选：同步切换复选框图标
  $(this).find("i").toggleClass("fa-square-o fa-check-square-o");

  // 此处保留你原本需要用itemId处理的业务逻辑
})

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