无法读取未定义的属性“classList”
2021-07-18
3184
我正在尝试制作一个 Facebook 克隆，但在“查看更多”按钮中遇到一个问题，它在第一次单击时显示隐藏的项目，但在另一次单击时不会隐藏它们，并且每次单击时都会出现错误“未捕获的 TypeError：无法读取未定义的属性‘classList’”
我的 javascript 代码
function showHidden() {
// i = 0;
let items = document.getElementsByClassName("hidden");
if (items[0].classList.contains("hidden")) {
for (i = 0; items.length > 0; i++) {
items[i].classList.add("unhidden");
}
} else if (items[0].classList.contains("unhidden") && items[0].classList.contains("hidden")) {
for (i = 0; items.length > 0; i++) {
items[i].classList.remove("unhidden");
}
}
}我的 HTML 代码
<li class="unhidden"><img
src="https://i.pinimg.com/originals/71/fc/47/71fc472790aa43f44555d08f4d4904c2.jpg"><a
href="#"><b>MR. X</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/yx/r/5rR6LRpNc5u.png"><a
href="#"><b>Covid 19 Information
Center</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y8/r/S0U5ECzYUSu.png"><a
href="#"><b>Friends</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/yU/r/D2y-jJ2C_hO.png"><a
href="#"><b>Market Place</b></a>
</li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y9/r/DHBHg9MEeSC.png"><a
href="#"><b>Ads</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y5/r/duk32h44Y31.png"><a
href="#"><b>Watch</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y8/r/he-BkogidIc.png"><a
href="#"><b>Memories</b></a>
</li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y5/r/PrjLkDYpYbH.png"><a
href="#"><b>Groups</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a
href="#"><b>Events</b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a
href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a
href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a
href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a
href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a
href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a
href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a
href="#"><b></b></a></li>
<li class="unhidden" onclick="showHidden();"><i class="fa fa-chevron-down"></i><a href="#"
style="padding-left: 21px;"><b>See More</b></a></li>CSS :
#navbarHz {
/* position: fixed; */
top: 3rem;
/* top: 0; */
bottom:0;
position:fixed;
overflow-y:auto;
overflow-x:hidden;
}
#navbarHz>ul {
display: flex;
width: 22vw;
flex-direction: column;
list-style: none;
/* height: auto; */
/* overflow-y: auto; */
}
#navbarHz>ul>li {
padding: 10px;
display: none;
align-items: center;
font-size: 18px;
}
#navbarHz>ul>li>i{
/* width: 40px; */
/* margin-left: 12px; */
padding: 8px;
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.1);
display: block;
/* margin-left: 12px; */
}
#navbarHz>ul>li>a {
text-decoration: none;
color: black;
}
#navbarHz>ul>li>img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}1个回答
错误是由于
for
语句中的逻辑错误造成的。
您使用了
for (i = 0; items.length > 0; i++) {
这将导致无限循环
如果
items.length
不等于
0
，则该循环始终为真。因此当
i > items.length
那么它将是未定义的，并且在
undefined
上获取
classList
将产生错误。
for ( i = 0; i < items.length; i++ ) {
function showHidden() {
// i = 0;
let items = document.getElementsByClassName("hidden");
if (items[0].classList.contains("hidden")) {
for (i = 0; i < items.length; i++) {
items[i].classList.add("unhidden");
}
} else if (items[0].classList.contains("unhidden") && items[0].classList.contains("hidden")) {
for (i = 0; i < items.length; i++) {
items[i].classList.remove("unhidden");
}
}
}#navbarHz {
/* position: fixed; */
top: 3rem;
/* top: 0; */
bottom: 0;
position: fixed;
overflow-y: auto;
overflow-x: hidden;
}
#navbarHz>ul {
display: flex;
width: 22vw;
flex-direction: column;
list-style: none;
/* height: auto; */
/* overflow-y: auto; */
}
#navbarHz>ul>li {
padding: 10px;
display: none;
align-items: center;
font-size: 18px;
}
#navbarHz>ul>li>i {
/* width: 40px; */
/* margin-left: 12px; */
padding: 8px;
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.1);
display: block;
/* margin-left: 12px; */
}
#navbarHz>ul>li>a {
text-decoration: none;
color: black;
}
#navbarHz>ul>li>img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}<li class="unhidden"><img src="https://i.pinimg.com/originals/71/fc/47/71fc472790aa43f44555d08f4d4904c2.jpg"><a href="#"><b>MR. X</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/yx/r/5rR6LRpNc5u.png"><a href="#"><b>Covid 19 Information Center</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y8/r/S0U5ECzYUSu.png"><a href="#"><b>Friends</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/yU/r/D2y-jJ2C_hO.png"><a href="#"><b>Market Place</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y9/r/DHBHg9MEeSC.png"><a href="#"><b>Ads</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y5/r/duk32h44Y31.png"><a href="#"><b>Watch</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y8/r/he-BkogidIc.png"><a href="#"><b>Memories</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y5/r/PrjLkDYpYbH.png"><a href="#"><b>Groups</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b>Events</b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png" class="hidden"><a href="#"><b></b></a></li>
<li class="unhidden" onclick="showHidden();"><i class="fa fa-chevron-down"></i><a href="#" style="padding-left: 21px;"><b>See More</b></a></li>------------已编辑-------------
function showHidden() {
let items = document.querySelectorAll(".hidden");
for (let i = 0; i < items.length; i++) {
items[i].classList.remove("hidden");
}
}#navbarHz {
/* position: fixed; */
top: 3rem;
/* top: 0; */
bottom: 0;
position: fixed;
overflow-y: auto;
overflow-x: hidden;
}
#navbarHz>ul {
display: flex;
width: 22vw;
flex-direction: column;
list-style: none;
/* height: auto; */
/* overflow-y: auto; */
}
#navbarHz>ul>li {
padding: 10px;
display: none;
align-items: center;
font-size: 18px;
}
#navbarHz>ul>li>i {
/* width: 40px; */
/* margin-left: 12px; */
padding: 8px;
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.1);
display: block;
/* margin-left: 12px; */
}
#navbarHz>ul>li>a {
text-decoration: none;
color: black;
}
#navbarHz>ul>li>img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}
.hidden {
display: none;
}
.unhidden {
display: block;
}<div id="navbarHz">
<li class="unhidden"><img src="https://i.pinimg.com/originals/71/fc/47/71fc472790aa43f44555d08f4d4904c2.jpg"><a href="#"><b>MR. X</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/yx/r/5rR6LRpNc5u.png"><a href="#"><b>Covid 19 Information Center</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y8/r/S0U5ECzYUSu.png"><a href="#"><b>Friends</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/yU/r/D2y-jJ2C_hO.png"><a href="#"><b>Market Place</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y9/r/DHBHg9MEeSC.png"><a href="#"><b>Ads</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y5/r/duk32h44Y31.png"><a href="#"><b>Watch</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y8/r/he-BkogidIc.png"><a href="#"><b>Memories</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/y5/r/PrjLkDYpYbH.png"><a href="#"><b>Groups</b></a></li>
<li class="unhidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b>Events</b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="unhidden" onclick="showHidden();"><i class="fa fa-chevron-down"></i><a href="#" style="padding-left: 21px;"><b>See More</b></a></li>
</div>
已编辑以切换
查看更多
和
隐藏
function showHidden() {
let hidden = document.querySelectorAll(".hidden");
let unHidden = document.querySelectorAll(".unhidden");
let btn = document.querySelector(".see-more-btn").querySelector("a").firstElementChild;
if (hidden.length > 0) {
for (let i = 0; i < hidden.length; i++) {
hidden[i].classList.remove("hidden");
hidden[i].classList.add("unhidden");
btn.textContent = "Hide"
}
} else if (unHidden.length > 0) {
for (let i = 0; i < unHidden.length; i++) {
unHidden[i].classList.remove("unhidden");
unHidden[i].classList.add("hidden");
btn.textContent = "See More"
}
}
}#navbarHz {
/* position: fixed; */
top: 3rem;
/* top: 0; */
bottom: 0;
position: fixed;
overflow-y: auto;
overflow-x: hidden;
}
#navbarHz>ul {
display: flex;
width: 22vw;
flex-direction: column;
list-style: none;
/* height: auto; */
/* overflow-y: auto; */
}
#navbarHz>li {
padding: 10px;
align-items: center;
list-style-type: none;
font-size: 18px;
}
#navbarHz>ul>li>i {
/* width: 40px; */
/* margin-left: 12px; */
padding: 8px;
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.1);
display: block;
/* margin-left: 12px; */
}
#navbarHz>ul>li>a {
text-decoration: none;
color: black;
}
#navbarHz>ul>li>img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}
.hidden {
display: none;
}<div id="navbarHz">
<li><img src="https://i.pinimg.com/originals/71/fc/47/71fc472790aa43f44555d08f4d4904c2.jpg"><a href="#"><b>MR. X</b></a></li>
<li><img src="https://www.facebook.com/rsrc.php/v3/yx/r/5rR6LRpNc5u.png"><a href="#"><b>Covid 19 Information Center</b></a></li>
<li><img src="https://www.facebook.com/rsrc.php/v3/y8/r/S0U5ECzYUSu.png"><a href="#"><b>Friends</b></a></li>
<li><img src="https://www.facebook.com/rsrc.php/v3/yU/r/D2y-jJ2C_hO.png"><a href="#"><b>Market Place</b></a></li>
<li><img src="https://www.facebook.com/rsrc.php/v3/y9/r/DHBHg9MEeSC.png"><a href="#"><b>Ads</b></a></li>
<li><img src="https://www.facebook.com/rsrc.php/v3/y5/r/duk32h44Y31.png"><a href="#"><b>Watch</b></a></li>
<li><img src="https://www.facebook.com/rsrc.php/v3/y8/r/he-BkogidIc.png"><a href="#"><b>Memories</b></a></li>
<li><img src="https://www.facebook.com/rsrc.php/v3/y5/r/PrjLkDYpYbH.png"><a href="#"><b>Groups</b></a></li>
<li><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b>Events</b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li class="hidden"><img src="https://www.facebook.com/rsrc.php/v3/ys/r/8wTx0Eu2vRq.png"><a href="#"><b></b></a></li>
<li onclick="showHidden();" class="see-more-btn">
<i class="fa fa-chevron-down"></i>
<a href="#" style="padding-left: 21px;">
<b>See More</b>
</a>
</li>
</div>DecPK
2021-07-18