使用JavaScript通过类隐藏li的元素

我有许多

li

，它们的类是

ans

在

ul

标签中。当在隐藏按钮中单击时，我希望将那些具有

ans

类的

li

消失，当单击显示按钮时，如果可能的话，我希望所有的

li

都重新显示，几乎没有过渡

我很少使用JavaScript，但它只隐藏了第一个位置

li

，并且不会影响其他

li

。我不知道如何重现这些

我的

HTML

：

Lorem ipsum door sit amet
Lorem ipsum door sit amet，奉献精英。嗯

Lorem，ipsum
Lorem ipsum door sate amet concertetur adipising elit

Lorem ipsum door-sit
Lorem ipsum door sate amet concertetur adipising elit

作答
隐藏答案

我做了一些JavaScript：

document.getElementsByClassName（“红色”）[0]。addEventListener（“单击”，关闭框）；
函数closeBox（）{
document.getElementsByClassName（“ans”）[0].style.display=“无”；
}

---

我更喜欢使用JavaScript，我不想要jQuery。

因此从技术上讲，第一个问题是您试图只访问为您找到的第一个元素what

getElementsByClassName

。您需要使用

Array.prototype.forEach.call来迭代所有元素，这将帮助您切换
li
项的可见性

基于此，我认为你可以这样做：


document.getElementsByCassName（“红色”）[0]。addEventListener（“单击”，（）=>SetVisibility（false））；
document.getElementsByCassName（“绿色”）[0]。addEventListener（“单击”，（）=>SetVisibility（true））；
常量设置可见性=（可见）=>{
const ansElements=document.getElementsByClassName（'ans'）；
常量样式=可见？'list item'：'none'；
Array.prototype.forEach.call（ansElements，e=>{
e、 style.display=样式；
});
}

Lorem ipsum door sit amet
Lorem ipsum door sit amet，奉献精英。嗯

Lorem，ipsum
Lorem ipsum door sate amet concertetur adipising elit

Lorem ipsum door-sit
Lorem ipsum door sate amet concertetur adipising elit

作答
隐藏答案
因此，从技术上讲，第一个问题是您试图仅访问为您找到的第一个元素。您需要使用
Array.prototype.forEach.call来迭代所有元素，这将帮助您切换
li
项的可见性

基于此，我认为你可以这样做：


document.getElementsByCassName（“红色”）[0]。addEventListener（“单击”，（）=>SetVisibility（false））；
document.getElementsByCassName（“绿色”）[0]。addEventListener（“单击”，（）=>SetVisibility（true））；
常量设置可见性=（可见）=>{
const ansElements=document.getElementsByClassName（'ans'）；
常量样式=可见？'list item'：'none'；
Array.prototype.forEach.call（ansElements，e=>{
e、 style.display=样式；
});
}

Lorem ipsum door sit amet
Lorem ipsum door sit amet，奉献精英。嗯

Lorem，ipsum
Lorem ipsum door sate amet concertetur adipising elit

Lorem ipsum door-sit
Lorem ipsum door sate amet concertetur adipising elit

作答
隐藏答案
通过访问节点列表（数组）
文档的[0]元素，您的问题存在于
->
箭头
[0]之间。getElementsByClassName（“ans”）[0]
您只获得第一个元素

您需要遍历节点列表的所有元素，而不仅仅是第一个元素

我将附加一个快速样本解决方案


let showButton=document.querySelector（'.green'）；
设hideButton=document.querySelector（'.red'）；
addEventListener（“单击“，（）=>toggleAns（true））；
showButton.addEventListener（“单击”，（）=>toggleAns（false））；
函数toggleAns（隐藏）{
设AnElements=document.querySelectorAll（'.ans'）；
for（元素的let元素）{
element.style.display=隐藏？'none'：'list item'；
}
}

Lorem ipsum door sit amet
Lorem ipsum door sit amet，奉献精英。嗯

Lorem，ipsum
Lorem ipsum door sate amet concertetur adipising elit

Lorem ipsum door-sit
Lorem ipsum door sate amet concertetur adipising elit

作答
隐藏答案
通过访问节点列表（数组）
文档的[0]元素。getElementsByClassName（“ans”）[0]
只获得第一个元素

您需要遍历节点列表的所有元素，而不仅仅是第一个元素

我将附加一个快速样本解决方案


let showButton=document.querySelector（'.green'）；
设hideButton=document.querySelector（'.red'）；
addEventListener（“单击“，（）=>toggleAns（true））；
showButton.addEventListener（“单击”，（）=>toggleAns（false））；
函数toggleAns（隐藏）{
设AnElements=document.querySelectorAll（'.ans'）；
for（元素的let元素）{
element.style.display=隐藏？'none'：'list item'；
}
}

Lorem ipsum door sit amet
Lorem ipsu