jQuery实现两组div同步上下循环切换 向下循环异常修复

核心问题定位 #

• 状态割裂：原代码将两组列表的向上、向下切换逻辑拆为4个完全独立的DOM初始化块，每个块单独声明索引变量（如num-分组向上逻辑的i、向下逻辑的i是两个互不通信的独立变量），向上按钮更新自身索引值时，向下按钮无法感知当前展示位置，必然出现顺序错乱。
• 取模逻辑错误：JavaScript原生取模运算会保留被除数的符号，原向下切换逻辑中的i = --i % divs.length会在索引减为负数后产生负的取模结果，jQuery的.eq()方法收到负索引时无法匹配到对应元素，直接导致展示失效。

调整后完整可运行代码 #

将分散的状态统一收拢管理，修正负数取模的计算逻辑，确保上下按钮共用同一份当前位置索引，保证切换逻辑连续：

$(document).ready(function() {
  // 统一获取两组列表元素，初始全部隐藏
  const numGroup = $('div[id^="num-"]').hide();
  const numvGroup = $('div[id^="numv-"]').hide();
  // 统一维护两组列表的当前展示索引
  let currentNumIdx = 0;
  let currentNumvIdx = 0;

  // 公共渲染方法：根据索引展示对应元素
  function renderActiveItem() {
    numGroup.hide().eq(currentNumIdx).show();
    numvGroup.hide().eq(currentNumvIdx).show();
  }

  // 页面加载完成后默认展示第一组元素
  renderActiveItem();

  // 向上切换按钮：顺序后移，到末尾后循环回开头
  $('#button1').click(function() {
    currentNumIdx = (currentNumIdx + 1) % numGroup.length;
    currentNumvIdx = (currentNumvIdx + 1) % numvGroup.length;
    renderActiveItem();
  });

  // 向下切换按钮：顺序前移，到开头后循环回末尾
  $('#button2').click(function() {
    // 先累加列表长度再取模，彻底规避负数索引的计算问题
    currentNumIdx = (currentNumIdx - 1 + numGroup.length) % numGroup.length;
    currentNumvIdx = (currentNumvIdx - 1 + numvGroup.length) % numvGroup.length;
    renderActiveItem();
  });
});

原HTML结构无需修改，直接配合上述JS代码即可实现正确的上下循环切换效果。

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