如何按类名遍历元素，实现点击事件仅作用于被点击的对应carousel元素？

问题根因 #

你代码的问题出在点击事件触发后，会遍历页面内所有.carousel元素执行滚动操作，所以所有轮播组件都会同步受到影响，你判断问题出在第二个forEach循环是完全正确的。

解决方案 #

你可以通过DOM节点的父子关系，精准定位当前点击按钮对应的轮播组件，不需要嵌套遍历所有轮播，修改后的JS代码如下：

/**
 *Constructors
 **/
const btns = document.getElementsByClassName("btns");

/**
 *Execute
 **/
Array.from(btns).forEach((btn) => {
  btn.addEventListener("click", (e) => {
    // 查找当前按钮所属的feed容器
    const feedContainer = btn.closest('.feed-container');
    // 仅选中该容器下对应的轮播元素
    const targetCarousel = feedContainer.querySelector('.carousel');
    if (btn.classList.contains("slide-left")) {
      targetCarousel.scrollLeft -= 20;
    } else if (btn.classList.contains("slide-right")) {
      targetCarousel.scrollLeft += 20;
    } else {
      alert("ut oh");
    }
  });
});

实现逻辑说明 #

closest('.feed-container') 方法会从点击的按钮节点开始向上查找DOM树，找到最近的class为feed-container的父容器，再通过querySelector('.carousel') 仅在这个父容器的范围内查找轮播元素，就能保证每次操作只作用于当前按钮对应的轮播，不会影响其他同类名的轮播组件。

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