求助：将轮播组件中querySelector替换为querySelectorAll并保留功能

我开发的轮播组件原本使用querySelector获取.slider__items时功能正常，但因后续需求要换成querySelectorAll，替换后组件完全失效，报错不断，求解决方案。

sorry for my english)

核心需求 #

将轮播组件中const sliderItems的querySelector替换为querySelectorAll，且保留原有轮播功能。

问题根源 #

querySelector返回单个DOM元素，而querySelectorAll返回NodeList类数组集合。原代码所有操作items的逻辑（比如items.style.left、items.appendChild）都是针对单个元素编写的，直接替换后这些操作会因为NodeList没有对应方法而报错。

修复后的完整代码 #

JavaScript 代码 #

const slider = document.querySelectorAll('.slider'),
      sliderItems = document.querySelectorAll('.slider__items'), 
      prev = document.querySelectorAll('.prev'),
      next = document.querySelectorAll('.next');

function slide(wrapper, items, prevBtns, nextBtns) {
  let posInitial,
      slides = items.querySelectorAll('.slider__slide'),
      slidesLength = slides.length,
      slideSize = slides[0].offsetWidth,
      firstSlide = slides[0],
      lastSlide = slides[slidesLength - 1],
      cloneFirst = firstSlide.cloneNode(true),
      cloneLast = lastSlide.cloneNode(true),
      index = 0,
      allowShift = true;

  // 设置初始偏移
  const slideWidth = window.getComputedStyle(firstSlide);
  items.style.left = `-${slideWidth.width}`;
  
  // 克隆首尾幻灯片
  items.appendChild(cloneFirst);
  items.insertBefore(cloneLast, firstSlide);
  wrapper.classList.add('loaded');

  // 绑定当前轮播对应的按钮点击事件
  const currentPrev = Array.from(prevBtns).find(btn => btn.closest('.slider') === wrapper);
  const currentNext = Array.from(nextBtns).find(btn => btn.closest('.slider') === wrapper);
  
  currentPrev?.addEventListener('click', () => shiftSlide(-1));
  currentNext?.addEventListener('click', () => shiftSlide(1));

  // 过渡结束事件
  items.addEventListener('transitionend', checkIndex);

  function shiftSlide(dir, action) {
    items.classList.add('shifting');
    
    if (allowShift) {
      if (!action) { posInitial = items.offsetLeft; }

      if (dir === 1) {
        items.style.left = `${posInitial - slideSize}px`;
        index++;     
      } else if (dir === -1) {
        items.style.left = `${posInitial + slideSize}px`;
        index--;  
      }
    }
    
    allowShift = false;
  }
    
  function checkIndex (){
    items.classList.remove('shifting');

    if (index === -1) {
      items.style.left = `-${slidesLength * slideSize}px`;
      index = slidesLength - 1;
    }

    if (index === slidesLength) {
      items.style.left = `-${1 * slideSize}px`;
      index = 0;
    }
    allowShift = true;
  }
}

// 遍历每个轮播实例，一一对应初始化
slider.forEach((wrapper, idx) => {
  const items = sliderItems[idx];
  if (items) {
    slide(wrapper, items, prev, next);
  }
});

HTML 代码 #

<div class="slider">
  <div class="slider__wrapper">
    <div class="slider__items">
      <span class="slider__slide">Slide 1</span>
      <span class="slider__slide">Slide 2</span>
      <span class="slider__slide">Slide 3</span>
      <span class="slider__slide">Slide 4</span>
      <span class="slider__slide">Slide 5</span>
      <span class="vertical slider__slide">Slide 6</span>
    </div>
  </div>
  
  <a id="prev" class="control prev"></a>
  <a id="next" class="control next"></a>
</div>

CSS 代码 #

.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.slider__wrapper {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  z-index: 1;
}

.slider__items {
  display: flex;
  position: absolute;
}

.slider__items.shifting {
  transition: left 0.2s ease-out;
}

.slider__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 400px;
  cursor: pointer;
  transition: all 1s;
  background: #FFCF47;
  border-radius: 2px;
}

.slider.loaded .slider__slide:nth-child(2),
.slider.loaded .slider__slide:nth-child(7) {
  background: #FFCF47;
}
.slider.loaded .slider__slide:nth-child(1),
.slider.loaded .slider__slide:nth-child(6) {
  background: #7ADCEF;
}
.slider.loaded .slider__slide:nth-child(3) {
  background: #3CFF96;
}
.slider.loaded .slider__slide:nth-child(4) {
  background: #a78df5;
}
.slider.loaded .slider__slide:nth-child(5) {
  background: #ff8686;
}

.control {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50px;
  margin-top: -20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.prev,
.next {
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.prev {
  background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
  left: -20px;
}

.next {
  background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
  right: -20px;
}

.prev:active,
.next:active {
  transform: scale(0.8);
}

关键修改点 #

1. 遍历初始化轮播：将原来单次调用slide改为遍历slider和sliderItems数组，确保每个轮播容器对应自己的幻灯片容器。
2. 修正元素选择逻辑：将items.querySelectorAll('.slider__items *')改为直接选择.slider__slide，避免选择到克隆后的重复元素。
3. 绑定对应按钮：通过closest('.slider')找到当前轮播对应的前后按钮，避免多个轮播时按钮事件冲突。
4. 调整单个元素操作：原代码中wrapper.forEach改为直接操作单个wrapper元素，因为现在每次slide函数处理的是单个轮播实例。

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