首次使用jQuery：以过滤器为触发器实现图片切换的问题排查

• 动态类绑定逻辑错误：你写的$('.is--active').on('click')是页面初始化时执行的，初始状态下没有is--active类的过滤器按钮不会被绑定该事件，所以取消选中过滤器时的重置逻辑根本不会触发
• 缺少状态判断：现有逻辑没有区分「点击未激活的过滤器（选中）」和「点击已激活的过滤器（取消选中）」两种场景，无法处理取消选中后的图片隐藏需求
• 重复绑定冗余：每个类别单独绑定点击事件的写法可维护性差，新增类别需要额外修改代码

// 统一绑定所有过滤器按钮的点击事件
$('.filters-button').on('click', function() {
  // 先清空所有图片的可见状态
  $('.is--visible').removeClass('is--visible');
  // 判断当前点击的按钮是否已经处于激活状态
  const curIsActive = $(this).hasClass('is--active');

  // 仅当按钮未激活时，才展示对应类别的图片；已激活状态点击就是取消选中，不需要加可见类
  if (!curIsActive) {
    // 直接取按钮id作为类别标识，和图片的类别类对应
    const targetCategory = $(this).attr('id');
    $('.' + targetCategory).addClass('is--visible');
  }
});

• 所有事件都绑定在固定类.filters-button上，不会因为按钮的is--active类动态变化出现事件绑定失效的问题
• 自动适配所有类别，后续新增过滤器只需要保证按钮id和对应图片的类别类一致即可，不需要修改JS逻辑
• 取消选中过滤器时，因为按钮已经有is--active类，所以不会执行添加可见类的逻辑，实现图片隐藏的需求

内容的提问来源于stack exchange，提问作者Michael Nöthiger