环形箭头式进度条：点击前后按钮实现循环切换的技术咨询

嘿，我帮你调整了代码来实现循环切换的需求，先看修改后的完整代码，再给你拆解逻辑：

jQuery(document).ready(function() {
  var back = jQuery(".js-prev");
  var next = jQuery(".js-next");
  var steps = jQuery(".step");
  
  next.bind("click", function() {
    // 获取当前处于"current"状态的步骤索引
    var currentIndex = steps.index(jQuery('.current'));
    // 先移除当前步骤的current类
    steps.eq(currentIndex).removeClass('current');
    
    if (currentIndex === steps.length - 1) {
      // 已经到最后一步，循环回到第一步
      steps.removeClass('done'); // 清除所有已完成状态
      steps.eq(0).addClass('current'); // 标记第一步为当前步骤
    } else {
      // 未到最后一步，沿用原逻辑推进步骤
      steps.eq(currentIndex).addClass('done');
      steps.eq(currentIndex + 1).addClass('current');
    }
  });
  
  back.bind("click", function() {
    var currentIndex = steps.index(jQuery('.current'));
    steps.eq(currentIndex).removeClass('current');
    
    if (currentIndex === 0) {
      // 已经到第一步，循环跳到最后一步
      steps.addClass('done'); // 先标记所有步骤为已完成
      steps.eq(steps.length - 1).removeClass('done').addClass('current'); // 最后一步设为当前，取消已完成标记
    } else {
      // 未到第一步，沿用原逻辑回退步骤
      steps.eq(currentIndex - 1).removeClass('done').addClass('current');
    }
  });
});

逻辑拆解： #

原代码的问题在于没有处理「到达边界」的情况——当进度条走到最后一步时，找不到下一个可标记的步骤；回到第一步时，也找不到可回退的已完成步骤。修改后的代码核心是：

1. 先定位当前步骤：通过steps.index(jQuery('.current'))获取当前活跃步骤的索引，这是实现循环的基础。
2. 下一步循环处理：如果当前是最后一步，就清除所有步骤的done状态，直接跳回第一步设为current；否则继续原有的「当前步骤标记为已完成，下一个步骤设为当前」逻辑。
3. 上一步循环处理：如果当前是第一步，就先把所有步骤标记为done，再将最后一步设为current并取消它的done标记；否则继续原有的「上一步取消已完成标记设为当前」逻辑。

这样调整后，点击「下一步」到末尾会自动回到开头，点击「上一步」到开头会自动跳到末尾，完美实现循环切换~

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