多组容器下点击切换active-check类的jQuery实现问题咨询

问题排查 #

你之前的代码存在两个核心错误：

• 类名拼写错误：你的HTML里父容器类是category-wrap，绑定事件时写成了.category-wrapp，多了末尾的p字符，导致事件根本没绑定到正确的容器上
• 事件类型错误：change事件仅适用于表单元素（input、select等），普通div元素触发不了change事件，应该替换为click事件

可行实现代码 #

$(".category-wrap").on("click", ".category-content-item", function () {
  // 定位当前点击元素所属的category-wrap容器，仅在该容器内操作，不影响其他组
  const $currentGroup = $(this).closest(".category-wrap");
  // 移除当前组内所有元素的active-check类
  $currentGroup.find(".category-content-item").removeClass("active-check");
  // 给当前点击元素添加选中类
  $(this).addClass("active-check");
});

实现逻辑说明 #

• 采用事件委托绑定到所有category-wrap容器上，后续如果有动态新增的同结构块，也能自动生效无需重新绑定事件
• 通过closest()方法向上查找最近的父级category-wrap，严格限定操作范围，不会跨组修改其他块的选中状态
• 先清空当前组所有选中状态再给当前元素加类，无需单独判断当前元素是否已经选中，逻辑更简洁容错性更高

内容的提问来源于stack exchange，提问作者Victor S.