我正在尝试为主页滑块创建一个样式化的导航,但是遇到一些控制台错误-即使该脚本在很大程度上完成了我想要的操作。那是在焦点元素的鼠标悬停时向相邻的兄弟元素添加类。就像笔显示的那样,它在大多数情况下都起作用,但是每次鼠标悬停时我都会出错,说它是无法读取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>
答案 0 :(得分:0)
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。将鼠标悬停在元素上时,会看到控制台日志。