如何将jQuery实现的轮播点击控制代码转换为原生JavaScript代码

原有代码错误点 #

• 仅使用querySelector选中第一个箭头绑定事件，右箭头无响应，应该用querySelectorAll选中所有.arrow元素遍历绑定事件
• 事件回调中使用外层的control变量判断点击对象，永远只会匹配第一个选中的箭头，应该用this指向当前点击的箭头元素
• 原生prevElementSibling/nextElementSibling不支持传入选择器过滤，且调用后未赋值给变量，原activeSlides未更新
• 原生DOM元素没有jQuery的.add()、.first()、.last()链式方法，边界判断（第一个元素左滑切最后一个、最后一个右滑切第一个）需要单独实现

修复后的代码 #

// 选中所有箭头绑定点击事件
document.querySelectorAll('.control-ct .arrow').forEach(arrow => {
  arrow.addEventListener('click', function() {
    const allSlides = document.querySelectorAll('#testimonialSlides .customer-block');
    const activeSlide = document.querySelector('#testimonialSlides .customer-block.active');
    // 移除当前激活态
    activeSlide.classList.remove('active');
    let targetSlide;
    if (this.matches('#left-arrow')) {
      // 左箭头：优先取前一个同类型滑块，不存在则取最后一个
      targetSlide = activeSlide.previousElementSibling;
      if (!targetSlide || !targetSlide.classList.contains('customer-block')) {
        targetSlide = allSlides[allSlides.length - 1];
      }
    } else {
      // 右箭头：优先取后一个同类型滑块，不存在则取第一个
      targetSlide = activeSlide.nextElementSibling;
      if (!targetSlide || !targetSlide.classList.contains('customer-block')) {
        targetSlide = allSlides[0];
      }
    }
    // 给目标滑块加激活态
    targetSlide.classList.add('active');
  })
})

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