getElementsByClassName实现多卡片列表滚动失效问题求助

问题 #

实现卡片横向滚动时，通过prev和next按钮控制滚动的功能仅对第一个cards列表生效，复制第二个cards列表后无法正常工作。

原因 #

原JavaScript代码仅获取了页面中第一个.bi-chevron-left、.bi-chevron-right按钮和第一个.cards容器，所有点击事件都只作用于第一个卡片列表，没有对所有卡片列表进行批量处理。

解决方案 #

遍历页面中所有的section元素，为每个section内的左右按钮绑定对应的滚动事件，让每个按钮只控制当前section下的卡片列表：

修改后的JavaScript代码 #

// 获取所有section元素
const sections = document.querySelectorAll('section');

// 遍历每个section
sections.forEach(section => {
    // 获取当前section内的左右按钮和cards容器
    const leftBtn = section.querySelector('.bi-chevron-left');
    const rightBtn = section.querySelector('.bi-chevron-right');
    const cards = section.querySelector('.cards');

    // 绑定左滚动事件
    leftBtn.addEventListener('click', () => {
        cards.scrollLeft -= 140;
    });

    // 绑定右滚动事件
    rightBtn.addEventListener('click', () => {
        cards.scrollLeft += 140;
    });
});

说明 #

• 使用document.querySelectorAll('section')获取所有卡片列表所在的section容器
• 通过section.querySelector()精准获取当前section内的按钮和卡片容器，避免跨section干扰
• 为每个section内的按钮独立绑定滚动事件，确保点击对应section的按钮只会控制该section下的卡片滚动

可选优化 #

• 可以将滚动步长设为常量，方便统一修改：

  const SCROLL_STEP = 140;
  // 后续使用时替换为
  cards.scrollLeft -= SCROLL_STEP;
  

• 若后续有动态添加的卡片列表，可将事件绑定逻辑封装为函数，动态添加后调用该函数完成事件绑定

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