jQuery点击事件中如何实现.next()循环切换.resize__icon的.active类

现有代码存在两个逻辑缺陷，直接导致预期的循环切换失效：

• 无边界兜底判断：当当前带.active类的图标是容器内最后一个子元素时，调用.next()会返回空的jQuery对象。代码会先移除现有图标的.active类，再对空对象执行加类操作，最终没有任何元素保留.active类，出现类被全部移除的异常表现。
• 缺少循环跳转逻辑：没有在到达列表末尾时主动切回第一个图标的处理，自然无法完成“点到末尾后回到起点循环”的效果。另外代码全程使用全局查询的容器作为查找范围，没有和当前点击的元素绑定，多容器场景下会出现状态串用的问题。
• 附带说明：原代码里类选择器的反斜杠写法属于不规范写法，虽然JS解析时会忽略无效转义，最终匹配到正确元素，但实际编写时直接写类选择器即可，不需要额外加反斜杠。

修改后的代码完全匹配需求，核心调整点：

• 以当前点击的.resize元素作为查找图标的根容器，避免全局范围的逻辑污染
• 对.next()的返回值做长度判断：如果下一个相邻图标不存在（也就是当前已经是最后一个图标），就自动定位到当前容器下的第一个.resize__icon元素，完成循环
• 类切换逻辑保持原有简洁的写法，不需要额外改动。

修改后的JavaScript代码 #

$(".resize").click(function() {
  // 绑定当前点击的容器为查找上下文
  const $resizeContainer = $(this);
  const $currentActive = $resizeContainer.find(".resize__icon.active");
  // 查找相邻的下一个图标
  let $nextTarget = $currentActive.next(".resize__icon");
  // 到达最后一个图标时，循环定位到第一个图标
  if ($nextTarget.length === 0) {
    $nextTarget = $resizeContainer.find(".resize__icon").first();
  }
  // 切换active类
  $currentActive.removeClass("active");
  $nextTarget.addClass("active");
});

结合给出的初始结构（3个图标，初始状态第一个图标带active）：

• 第1次点击：active从第一个图标切到第二个
• 第2次点击：active从第二个图标切到第三个
• 第3次点击：触发边界判断，active切回第一个图标
  累计到第4次点击时，循环逻辑会自然让active回到起点，完全符合需求的循环规则。

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