使用nextElementSibling遇异常：对象属性调用document方法时轮播卡顿

我一眼就看出问题出在哪了——你没有更新Slider对象里currentSlide属性的引用！

你看，初始化的时候，你把第一个带current-slide类的元素赋值给了this.currentSlide，但每次切换幻灯片后，这个属性还是死死盯着最初的那张幻灯片。第一次点击时，你确实把类加到了第二张，但之后再点，代码还是在操作第一张的nextElementSibling（也就是第二张），当然没法继续往后切啦！

最简单的修复方案 #

只需要在nextSlide方法里，每次切换完就更新this.currentSlide的指向就行。修改后的方法长这样：

nextSlide: function () {
  this.currentSlide.classList.remove("current-slide");
  let newCurrentSlide;
  if (this.currentSlide.nextElementSibling) {
    newCurrentSlide = this.currentSlide.nextElementSibling;
    newCurrentSlide.classList.add('current-slide');
  } else {
    newCurrentSlide = this.slides[0];
    newCurrentSlide.classList.add('current-slide');
  }
  // 关键：更新currentSlide的引用，让它指向新的当前幻灯片
  this.currentSlide = newCurrentSlide;
},

另外，你的onClick方法里有个空的console.log()，要么删掉要么改成有用的调试信息，比如console.log('切换到下一张')，方便你调试~

修复后的完整JS代码 #

const Slider = {
  slides: document.querySelectorAll('.slide'),
  currentSlide: document.querySelector('.current-slide'),
  next: document.getElementById("next"),
  nextSlide: function () {
    this.currentSlide.classList.remove("current-slide");
    let newCurrentSlide;
    if (this.currentSlide.nextElementSibling) {
      newCurrentSlide = this.currentSlide.nextElementSibling;
      newCurrentSlide.classList.add('current-slide');
    } else {
      newCurrentSlide = this.slides[0];
      newCurrentSlide.classList.add('current-slide');
    }
    this.currentSlide = newCurrentSlide;
  },
  onClick: function () {
    this.next.addEventListener('click', event => {
      console.log('切换幻灯片');
      this.nextSlide();
    });
  }
}
Slider.onClick();

额外给你个优化思路 #

如果你不想维护currentSlide这个属性，也可以每次切换时直接通过类选择器获取当前幻灯片，这样就彻底避免了引用更新的问题。比如把nextSlide改成这样：

nextSlide: function () {
  const currentSlide = document.querySelector('.current-slide');
  currentSlide.classList.remove("current-slide");
  // 用可选链和closest确保拿到的是幻灯片元素，避免DOM结构变化出问题
  let newCurrentSlide = currentSlide.nextElementSibling?.closest('.slide') || this.slides[0];
  newCurrentSlide.classList.add('current-slide');
}

这样代码更简洁，也不用担心忘记更新引用啦~

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