原生JavaScript多个同类名横向滑块联动bug如何解决

• 全局共用唯一偏移量变量x，所有滑块的滑动状态绑定在一起，修改后全部同步生效
• 选择页面内所有.slide元素统一修改样式，没有区分元素所属的滑块
• 绑定事件时同时使用for循环和forEach双重遍历，同一个按钮会被绑定多次点击事件，导致单次点击触发多次偏移量修改

首先调整HTML结构，给每个独立滑块增加父容器标识，方便后续元素隔离选择，结构参考：

<!-- 单个滑块结构 -->
<div class="slider-wrap">
  <button class="move-left">左切换</button>
  <div class="slide-list">
    <div class="slide">内容1</div>
    <div class="slide">内容2</div>
    <!-- 更多滑块内容 -->
  </div>
  <button class="move-right">右切换</button>
</div>
<!-- 其余滑块结构保持一致即可 -->

核心逻辑是每个滑块独立维护自己的状态，只操作自身内部的元素，和其他滑块完全隔离。

// 遍历所有滑块容器，每个独立初始化
document.querySelectorAll('.slider-wrap').forEach(slider => {
  // 仅选择当前滑块内的元素，和其他滑块完全隔离
  const moveLeftBtn = slider.querySelector('.move-left')
  const moveRightBtn = slider.querySelector('.move-right')
  const slideList = slider.querySelectorAll('.slide')
  // 每个滑块私有偏移量，闭包隔离不共享
  let currentOffset = 0
  const singleSlideWidth = 320

  // 左切换逻辑
  moveLeftBtn.addEventListener('click', () => {
    currentOffset++
    // 最大偏移限制，可根据实际slide数量动态计算更灵活
    if(currentOffset > 5) currentOffset = 5
    slideList.forEach(slide => {
      slide.style.left = `-${currentOffset * singleSlideWidth}px`
    })
  })

  // 右切换逻辑
  moveRightBtn.addEventListener('click', () => {
    currentOffset--
    if(currentOffset < 0) currentOffset = 0
    slideList.forEach(slide => {
      slide.style.left = `-${currentOffset * singleSlideWidth}px`
    })
  })
})

如果需要适配不同宽度的滑块，可以通过offsetWidth动态获取单张slide的宽度，不用写死320px，适配性更强。

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