javascript - 脚本有效但有错误:未捕获的类型错误:无法在 HTMLAnchorElement 处读取 null 的属性“classList”
问题描述
我正在尝试为主页滑块创建一个风格化的导航,但出现了一些控制台错误——即使脚本在很大程度上执行了我想要的操作。那是在焦点元素的鼠标悬停时向相邻的兄弟元素添加类。就像钢笔展示的那样,它大部分都在工作,但每次鼠标悬停时我都会出错,说它无法读取 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>
解决方案
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。当您将鼠标悬停在元素上时,请查看控制台日志。
推荐阅读
- flutter - 具有空安全性的回调函数
- php - 带搜索框的从属下拉列表
- django - 如何使用带有 TLSv1_2 的 gunicorn 运行 django 项目
- javascript - 将 JavaScript 对象传输到 HTML 表
- c++ - 为什么可以使用类型别名定义对引用的引用?
- python-3.x - 我已将 nltk 标签转换为 wordnet 标签。当我尝试对数据集应用词形还原时,我收到了这个错误。我该怎么办?
- flutter - 单击“从图库中选择”或从相机中“拍照”后没有任何执行。请看我的代码。Flutter 图像选择器和裁剪器
- c - 尝试使用 CMake 构建 aws-c-common 包时出错
- node.js - 有条件地向特定用户发送网络推送通知
- flutter - 如何通过下拉菜单隐藏表单的可见性