如何用循环简化JavaScript中多组侧边滚动按钮的代码？

首先推荐用**数据属性（data-*）**来关联按钮和目标容器，这种方式不需要依赖id的命名规则，扩展性更强。

步骤1：调整HTML结构 #

给每个滚动按钮添加两个数据属性：

• data-target：指定要控制的滚动容器的选择器（比如#con、#con1）
• data-direction：指定滚动方向，1代表向右（增加scrollLeft），-1代表向左（减少scrollLeft）

示例HTML：

<button id="next" data-target="#con" data-direction="1">下一页</button>
<button id="back" data-target="#con" data-direction="-1">上一页</button>
<button id="next1" data-target="#con1" data-direction="1">下一页</button>
<button id="back1" data-target="#con1" data-direction="-1">上一页</button>

<div id="con" style="overflow-x: auto; width: 500px;">
  <!-- 你的内容 -->
</div>
<div id="con1" style="overflow-x: auto; width: 500px;">
  <!-- 你的内容 -->
</div>

步骤2：简化JavaScript代码 #

通过选择器获取所有带指定数据属性的按钮，循环绑定点击事件即可：

// 定义固定滚动步长
const scrollStep = 1308;

// 获取所有滚动控制按钮
const scrollButtons = document.querySelectorAll('[data-target][data-direction]');

// 循环给每个按钮绑定点击逻辑
scrollButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 从数据属性中获取目标容器和滚动方向
    const targetSelector = button.dataset.target;
    const direction = parseInt(button.dataset.direction);
    
    // 找到目标容器元素
    const targetContainer = document.querySelector(targetSelector);
    
    // 确保容器存在再执行滚动，避免报错
    if (targetContainer) {
      targetContainer.scrollLeft += direction * scrollStep;
    }
  });
});

替代方案（不修改HTML的情况） #

如果不想改动现有HTML，可以通过id的命名规则（比如next/next1对应con/con1）来匹配：

const scrollStep = 1308;

// 处理所有next按钮
document.querySelectorAll('[id^="next"]').forEach(button => {
  // 提取id中的数字后缀（比如next1提取出"1"，next提取出空字符串）
  const suffix = button.id.replace('next', '');
  const container = document.getElementById(`con${suffix}`);
  
  if (container) {
    button.addEventListener('click', () => {
      container.scrollLeft += scrollStep;
    });
  }
});

// 处理所有back按钮
document.querySelectorAll('[id^="back"]').forEach(button => {
  const suffix = button.id.replace('back', '');
  const container = document.getElementById(`con${suffix}`);
  
  if (container) {
    button.addEventListener('click', () => {
      container.scrollLeft -= scrollStep;
    });
  }
});

为什么这样更优 #

• 避免重复代码：不管有多少组滚动按钮，只需要写一次逻辑
• 可维护性更高：新增滚动组时，只需要添加对应的按钮和容器，不用修改JS代码
• 容错性更好：判断容器是否存在，避免因元素不存在导致的控制台报错

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