多同类横向滚动容器的Prev/Next按钮绑定问题

核心问题是你之前的代码直接选中了所有.scroll_container，所以点击按钮会触发全部容器滚动。要解决这个，关键是通过当前点击的按钮定位到它对应的那个容器，而不是全局选中。

核心思路 #

• 用$(this)获取当前点击的按钮元素，确保只处理这个按钮对应的容器
• 根据你的DOM结构，找到按钮和对应容器的关联关系（比如共同父容器、同级关系），用jQuery选择器定位到目标容器
• 只对这个目标容器执行滚动操作

示例代码（适配最常见的DOM结构） #

假设你的DOM结构是每个滚动容器和按钮都被一个父容器包裹（比如scroll_group），像这样：

<div class="scroll_group">
  <button class="prev">←</button>
  <div class="scroll_container">
    <!-- 横向滚动内容 -->
  </div>
  <button class="next">→</button>
</div>
<div class="scroll_group">
  <button class="prev">←</button>
  <div class="scroll_container">
    <!-- 横向滚动内容 -->
  </div>
  <button class="next">→</button>
</div>

对应的jQuery代码：

// 绑定按钮点击事件（用事件委托兼容动态生成的元素）
$(document).on('click', '.prev, .next', function() {
  // 找到当前按钮所在的父容器，再在里面找对应的滚动容器
  const $targetContainer = $(this).closest('.scroll_group').find('.scroll_container');
  // 每次滚动的距离，根据你的内容宽度调整
  const scrollDistance = 300;

  if ($(this).hasClass('prev')) {
    // 向左滚动
    $targetContainer.animate({
      scrollLeft: $targetContainer.scrollLeft() - scrollDistance
    }, 300); // 300是动画时长，单位毫秒
  } else {
    // 向右滚动
    $targetContainer.animate({
      scrollLeft: $targetContainer.scrollLeft() + scrollDistance
    }, 300);
  }
});

针对你之前closest()无效的情况排查 #

如果你用closest()没找到容器，大概率是选择的父容器不对：

• 如果按钮和滚动容器是同级关系（没有共同父容器），把closest('.scroll_group').find('.scroll_container')换成$(this).siblings('.scroll_container')
• 如果按钮在容器的前面/后面，用$(this).next('.scroll_container')（prev按钮）或$(this).prev('.scroll_container')（next按钮）
• 如果父容器层级更深，用parents('.scroll_group')代替closest('.scroll_group')（closest只找最近的一个，parents会找所有符合的父元素）

关键注意点 #

• 绝对不要直接用$('.scroll_container')，这会选中页面上所有的滚动容器
• 用$(this)是核心，它代表当前被点击的按钮，确保操作的是对应容器
• 如果不需要平滑滚动，直接用$targetContainer.scrollLeft($targetContainer.scrollLeft() ± scrollDistance)即可，去掉animate

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