个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当我 console.log target.nextElementSibling 时，它指向正确的元素。但是当我尝试添加 ".d_on" 到 target.nextElementSibling。
var ul = document.querySelector(".images");
var img_li = document.querySelectorAll(".img_li");
var pointer = document.querySelector(".d_on");
var left = document.querySelector(".left");
var right = document.querySelector(".right");
right.addEventListener("click",function(){
img_li.forEach(element => {
if(element.classList.contains("d_on")){
element.classList.remove("d_on");
var nextElem = element.nextElementSibling;
console.log(nextElem);
nextElem.classList.add("d_on");
}
});
});//end of event
<body>
<div id="img-nav">
<a href="#" class="arrow left"><img src="img/left.png"></a>
<a href="#" class="arrow right"><img src="img/right.png"></a>
</div>
<ul id="images">
<li class="img_li d_on"><img src="img/1.jpg"></li>
<li class="img_li "><img src="img/2.jpg"></li>
<li class="img_li"><img src="img/3.jpg"></li>
<li class="img_li "><img src="img/4.jpg"></li>
<li class="img_li"><img src="img/5.jpg"></li>
<li class="img_li"><img src="img/6.jpg"></li>
<li class="img_li"><img src="img/7.jpg"></li>
<li class="img_li"><img src="img/8.jpg"></li>
</ul>
</body>
最佳答案
为下一个元素添加空检查
if (nextElem != null) {
nextElem.classList.add("d_on");
}
//Note: nextElem!= null checks for both null and undefined.
关于javascript - 未捕获的 TypeError : Cannot read property 'classList' of null | But points to the element when I console. 记录它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51219770/
25
4
0
我是一名优秀的程序员,十分优秀！