如何解决通过Javascript从HTML的多个标签中删除类的正确方法是什么
此代码可以正常工作:
setTimeout(function(){
let inactiveClass = document.getElementsByClassName(`nonactive`)
console.log(inactiveClass)
inactiveClass[1].classList.remove(`nonactive`)
inactiveClass[0].classList.remove(`nonactive`)
},1000)
但是,只要我将最后两行更改为
setTimeout(function(){
let inactiveClass = document.getElementsByClassName(`nonactive`)
console.log(inactiveClass)
inactiveClass[0].classList.remove(`nonactive`)
inactiveClass[1].classList.remove(`nonactive`)
},1000)
控制台告诉我
script.js:9 Uncaught TypeError: Cannot read property 'classList' of undefined
为什么会这样?
解决方法
getElementsByClassName返回找到的元素的实时 HTMLCollection。
每次删除一项时,集合会较小。因此,当您删除[0]时,就没有[1]了
所以您需要做相反的操作,或者使用另一个保留的类,或者使用这样的静态列表:
setTimeout(function() {
[...document.querySelectorAll(`.nonactive`)]
.forEach(inact => inact.classList.remove(`nonactive`));
},1000)
.nonactive {
color: red;
}
<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>
<div class="nonactive">Non active</div>
,
问题是,一旦您更新HTMLCollection中的元素,HTMLCollection就会更改。因此,您必须从末尾开始迭代,而不是从HTMLCollection的开始...
setTimeout(function() {
let inactiveClasses = document.getElementsByClassName(`nonactive`)
for (let i = inactiveClasses.length - 1; i >= 0; i--) {
const inactiveClass = inactiveClasses[i];
inactiveClass.classList.remove(`nonactive`)
}
},1000)
div {
color: green;
}
.nonactive {
color: red;
}
<div class="nonactive">test1</div>
<div class="nonactive">test2</div>
<div class="nonactive">test3</div>
<div class="nonactive">test4</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。