JavaScript结合animejs实现的测验模块Previous按钮始终跳转下一题的问题修复

• 你编写的previous()函数完全复制了next()的代码逻辑，未做任何反向跳转适配，函数内部从动画配置到完成回调与next()无差异，点击后自然执行和下一题完全一致的序号累加操作。
• 页面中两个按钮使用了重复的idrc，属于HTML不规范写法，会导致后续DOM操作时出现元素匹配偏差。

next()内置的序号更新逻辑是专为向后跳转设计的：

1. 当当前序号question等于题目数组最后一位的索引（即处于最后一题位置）时，序号重置为0回到第一题
2. 其他情况执行question++，序号加1向后切换一题
   你直接将这套逻辑套用到previous()函数中，完全没有实现序号递减、循环边界向前跳转的逻辑，和预期的向前切换效果完全不匹配。

1. 重写previous()的序号更新逻辑 #

当前退出题目的缩放消失动画在前后切换场景下是通用的，不需要修改，只需要替换动画完成后的回调逻辑，实现向前跳转的序号计算：

function previous() {
  anim = anime.timeline()
    .add({
      targets: targets.reverse(),
      scale: [1, 3],
      scaleY: [1, 1.5],
      opacity: [1, 0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 100,
      delay: (el, i) => 30 * i
    });

  anim.complete = () => {
    // 处理向前跳转的循环边界：当前在第一题位置时，往前切直接跳到最后一题
    if (question == 0) {
      question = questions.length - 1;
    } else {
      // 其余情况序号减1，切换到上一题
      question--;
    }
    prepQuestion();
  };
}

2. 修正HTML重复id问题 #

将两个按钮的重复id调整为唯一值，避免后续DOM操作出现匹配异常：

<Button id="next-btn" onclick="next()">Next</Button>
<Button id="prev-btn" onclick="previous()">previous</Button>

调整完成后可实现预期的循环回退逻辑：

• 从第3题点击previous，序号从2（数组从0开始计数）减为1，切回第2题
• 从第4题点击previous，序号从3减为2，切回第3题
• 当前在第1题（序号0）时点击previous，会自动跳转到第4题，形成完整的双向循环切换效果

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