jQuery绑定两次顺序点击事件后盒子无法重复放大缩小如何解决

开发者阿泽

2026-10-2

问题原因分析

嵌套绑定点击事件：你在.item的全局点击回调内，额外给当前点击的元素重复绑定了新的点击事件，每点击一次就会多绑定一个回调函数，后续点击时多个回调会先后执行，导致grow类添加后立刻被移除的逻辑冲突
缺少状态判断：没有根据当前元素是否已有grow类区分「放大」和「缩小」两种交互场景，逻辑完全耦合

修复方案

不需要嵌套绑定事件，只需要给所有.item绑定一次全局点击事件，每次点击时判断当前元素的状态执行对应逻辑即可，修复后代码如下：

$(".item").on("click", function() {
  // 判断当前点击的盒子是否已经是放大状态
  const isGrown = $(this).hasClass("grow");
  if (isGrown) {
    // 已经放大，点击就缩小复原
    $(this).removeClass("grow");
    $(".item").not(this).removeClass("collapse");
  } else {
    // 未放大，点击就放大当前盒子，收起其他盒子
    $(this).addClass("grow");
    $(".item").not(this).addClass("collapse");
  }
})

优化说明