javascript - 脚本有效但有错误 : Uncaught TypeError: Cannot read property 'classList' of null at HTMLAnchorElement

Question

我正在尝试为主页 slider 创建一个程式化的导航，但出现了一些控制台错误 - 即使脚本在大多数情况下都在执行我想要的操作。那是在鼠标悬停在焦点元素上时向相邻的同级元素添加类。就像笔显示的那样，它在大多数情况下都有效，但是每次鼠标悬停时我都会遇到错误，说它无法读取 null 的属性“classList”。谁能告诉我为什么会这样和修复？

var sliderNav = document.getElementById('sliderNav');
var paraIns = new Parallax(sliderNav);
var thumbs = document.querySelectorAll('.thumbnail');

thumbs[3].classList.add('active');

for (var i = 0; i < thumbs.length; i++) {
  thumbs[i].addEventListener('mouseover', function(){
    this.classList.add('active');
    this.previousElementSibling.classList.add('adjacent');
    this.nextElementSibling.classList.add('adjacent');
    this.previousElementSibling.previousElementSibling.classList.add('adjacentx2');
    this.nextElementSibling.nextElementSibling.classList.add('adjacentx2');
  });
  thumbs[i].addEventListener('mouseout', function(){
    this.classList.remove('active');
    this.previousElementSibling.classList.remove('adjacent');
    this.nextElementSibling.classList.remove('adjacent');
    this.previousElementSibling.previousElementSibling.classList.remove('adjacentx2');
    this.nextElementSibling.nextElementSibling.classList.remove('adjacentx2');
  })
}

html, body {
  margin: 0;
}
.slider {
  background-color: darkgray;
  width: 100%;
  height: 400px;
  position: relative;
  margin-bottom: 1200px;
}
.slider__navigation {
  pointer-events: unset !important;
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 1200px;
  height: 240px;
}
.slider__navigation .thumbnail {
  display: inline-block;
  width: 14%;
  height: 240px;
  float: left;
  padding: 20px;
  z-index: 2;
}
.slider__navigation .thumbnail .thumbnail__img {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
  background: lightgray;
  transform: scale(0.7);
}
.slider__navigation .thumbnail:nth-child(2) {
  left: 13% !important;
}
.slider__navigation .thumbnail:nth-child(3) {
  left: 27% !important;
}
.slider__navigation .thumbnail:nth-child(4) {
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.slider__navigation .thumbnail:nth-child(5) {
  left: 56% !important;
}
.slider__navigation .thumbnail:nth-child(6) {
  left: 71% !important;
}
.slider__navigation .thumbnail:nth-child(7) {
  left: 84% !important;
}
.slider__navigation .thumbnail:nth-child(3), .slider__navigation .thumbnail:nth-child(5) {
  z-index: 4;
}
.slider__navigation .thumbnail:nth-child(2), .slider__navigation .thumbnail:nth-child(6) {
  z-index: 3;
}
.slider__navigation .thumbnail.active {
  z-index: 5;
}
.slider__navigation .thumbnail.active .thumbnail__img {
  transform: scale(1);
}
.slider__navigation .thumbnail.adjacent {
  z-index: 4;
}
.slider__navigation .thumbnail.adjacent .thumbnail__img {
  transform: scale(0.9);
}
.slider__navigation .thumbnail.adjacentx2 {
  z-index: 3;
}
.slider__navigation .thumbnail.adjacentx2 .thumbnail__img {
  transform: scale(0.8);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<div class="slider">
  <div id="sliderNav" class="slider__navigation" data-relative-input="true">
  <a href="#" class="thumbnail" data-depth="0.2">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.4">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.6">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.8">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.6">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.4">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.2">
    <div class="thumbnail__img"></div>  
  </a>
</div>
</div>

Answer 1

var sliderNav = document.getElementById('sliderNav');
var paraIns = new Parallax(sliderNav);
var thumbs = document.querySelectorAll('.thumbnail');

thumbs[3].classList.add('active');

for (var i = 0; i < thumbs.length; i++) {
  thumbs[i].addEventListener('mouseover', function() {
    console.log(!!this.previousElementSibling, !!this.nextElementSibling);
  });
}

html,
body {
  margin: 0;
}

.slider {
  background-color: darkgray;
  width: 100%;
  height: 400px;
  position: relative;
  margin-bottom: 1200px;
}

.slider__navigation {
  pointer-events: unset !important;
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 1200px;
  height: 240px;
}

.slider__navigation .thumbnail {
  display: inline-block;
  width: 14%;
  height: 240px;
  float: left;
  padding: 20px;
  z-index: 2;
}

.slider__navigation .thumbnail .thumbnail__img {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
  background: lightgray;
  transform: scale(0.7);
}

.slider__navigation .thumbnail:nth-child(2) {
  left: 13% !important;
}

.slider__navigation .thumbnail:nth-child(3) {
  left: 27% !important;
}

.slider__navigation .thumbnail:nth-child(4) {
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.slider__navigation .thumbnail:nth-child(5) {
  left: 56% !important;
}

.slider__navigation .thumbnail:nth-child(6) {
  left: 71% !important;
}

.slider__navigation .thumbnail:nth-child(7) {
  left: 84% !important;
}

.slider__navigation .thumbnail:nth-child(3),
.slider__navigation .thumbnail:nth-child(5) {
  z-index: 4;
}

.slider__navigation .thumbnail:nth-child(2),
.slider__navigation .thumbnail:nth-child(6) {
  z-index: 3;
}

.slider__navigation .thumbnail.active {
  z-index: 5;
}

.slider__navigation .thumbnail.active .thumbnail__img {
  transform: scale(1);
}

.slider__navigation .thumbnail.adjacent {
  z-index: 4;
}

.slider__navigation .thumbnail.adjacent .thumbnail__img {
  transform: scale(0.9);
}

.slider__navigation .thumbnail.adjacentx2 {
  z-index: 3;
}

.slider__navigation .thumbnail.adjacentx2 .thumbnail__img {
  transform: scale(0.8);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<div class="slider">
  <div id="sliderNav" class="slider__navigation" data-relative-input="true">
    <a href="#" class="thumbnail" data-depth="0.2">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.4">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.6">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.8">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.6">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.4">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.2">
      <div class="thumbnail__img"></div>
    </a>
  </div>
</div>

第一个/最后一个元素没有previousElementSibling/nextElementSibling。将鼠标悬停在元素上时查看控制台日志。