多轮播组件按钮批量绑定EventListener失效问题求助

你的问题核心是：所有按钮都在操作同一个全局的itemContainer，导致只有第一个轮播（或某个固定轮播）有反应，其他轮播的按钮无法控制对应内容容器。

问题分析 #

原来的代码中，itemContainer是一个全局变量，指向某个固定的.item_container元素。当存在多个轮播时，无论点击哪个按钮，都会修改这个固定容器的样式，自然其他轮播不会产生变化。解决关键是让每个按钮找到自己对应的轮播容器。

解决方案1：给每个轮播添加父容器（推荐） #

先调整HTML结构，把每个完整的轮播模块（后退按钮+main+前进按钮）包裹在.carousel父容器中，通过父容器快速定位对应内容：

<!-- 第一个轮播 -->
<div class="carousel">
  <ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
  <main>
      <h1>Poular Shoes</h1>
      <div class="visible_items">
          <div class="item_container">
              <div class="items"></div>
              <div class="items"></div>
              <!-- 更多轮播项 -->
          </div>
      </div>
  </main>
  <ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
</div>

<!-- 第二个轮播 -->
<div class="carousel">
  <ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
  <main>
      <h1>Another Category</h1>
      <div class="visible_items">
          <div class="item_container">
              <!-- 轮播项内容 -->
          </div>
      </div>
  </main>
  <ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
</div>

然后修改JS代码，通过closest()方法找到当前按钮所属的.carousel容器，再在容器内定位对应的.item_container：

// 绑定前进按钮事件
document.querySelectorAll('.button-forward').forEach(button => {
  button.addEventListener('click', () => {
    const carousel = button.closest('.carousel');
    const itemContainer = carousel.querySelector('.item_container');
    itemContainer.style.transform = 'translateX(-40%)';
  });
});

// 绑定后退按钮事件
document.querySelectorAll('.button-back').forEach(button => {
  button.addEventListener('click', () => {
    const carousel = button.closest('.carousel');
    const itemContainer = carousel.querySelector('.item_container');
    itemContainer.style.transform = 'translateX(10%)';
  });
});

这种方式结构清晰、健壮性高，后续调整DOM结构时，只要不破坏.carousel的包裹关系，代码就不会失效。

解决方案2：不修改HTML，依赖兄弟元素定位 #

如果不想调整现有HTML结构，可以通过按钮的兄弟元素定位对应的main容器，进而找到.item_container：

// 后退按钮：定位下一个兄弟元素（main）内的内容容器
document.querySelectorAll('.button-back').forEach(button => {
  button.addEventListener('click', () => {
    const itemContainer = button.nextElementSibling.querySelector('.item_container');
    itemContainer.style.transform = 'translateX(10%)';
  });
});

// 前进按钮：定位前一个兄弟元素（main）内的内容容器
document.querySelectorAll('.button-forward').forEach(button => {
  button.addEventListener('click', () => {
    const itemContainer = button.previousElementSibling.querySelector('.item_container');
    itemContainer.style.transform = 'translateX(-40%)';
  });
});

这种方式无需修改HTML，但依赖严格的DOM顺序——如果后续在按钮和main之间添加其他元素，代码会直接失效，适合结构固定的场景。

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