[英]How do I hide children inside a div element when button is pressed? (without hidding parent)
I have this sidebar in my html file that I want to have all sorts of content in it.我的 html 文件中有这个侧边栏,我想在其中包含各种内容。 However, I can't really fit it all inside.
但是,我不能真正把它全部放在里面。 I want to hide the default children inside the parent div
side-bar
.我想隐藏父 div
side-bar
内的默认子项。 At first I tried making a loop that goes through all the children and changes their style to style.display = 'none';
起初我尝试制作一个循环遍历所有孩子并将他们的样式更改为
style.display = 'none';
. . That didn't work.
那没有用。 I got the error message:
code.js:128 Uncaught TypeError: Cannot set property 'display' of undefined
我收到错误消息:
code.js:128 Uncaught TypeError: Cannot set property 'display' of undefined
My current code to do my goal is (in javascript):我当前的目标代码是(在 javascript 中):
document.getElementById("other-stats").addEventListener("click",function()
{
for(var i = 0 ; i < document.getElementById("side-bar").children.length ; i++)
{
document.getElementById("side-bar").lastChild.style.display = 'none';
}
});
I appreciate any answer that anybody can give, but I'm not using Jquery in my code, so I was hoping for some javascript answers.我很感激任何人都可以给出的答案,但我没有在我的代码中使用 Jquery,所以我希望得到一些 javascript 答案。
my html:我的 html:
<div id="side-bar">
<div id="character-view-section">
<center>
<img style="width:150px ; height:200px ; margin-top:50px ;" alt="character">
</center>
</div>
<div id="stats-section">
<p id="health" style="border:solid 2px crimson ; background-color: crimson ;" class="stats">
health: 100
</p>
<p id="stamina" style="border:solid 2px rgb(38, 168, 21) ; background-color: rgb(38, 168, 21) ;" class="stats">
stamina: 50
</p>
<p id="weapon" style="border:solid 2px rgb(20, 197, 220); ; background-color: rgb(20, 197, 220) ;" class="stats">
weapon: NOT DETERMINED
</p>
</div>
<div id="inventory-section">
</div>
<center>
<button id="use-item">
use item
</button>
</center>
<button id="other-stats">
other stats
</button>
</div>
This is the entire side bar div that I made.这是我制作的整个侧边栏 div。 Everything inside here, other than the bar, is what I would like to hide in order to place other elements.
除了酒吧之外,这里的所有东西都是我想隐藏的,以便放置其他元素。
You can use #side-bar > *
as a selector to select the child elements of the side bar, you can then loop through them to hide them programatically.您可以使用
#side-bar > *
作为 select 侧栏子元素的选择器,然后可以循环遍历它们以编程方式隐藏它们。
document.getElementById("other-stats").addEventListener("click",function()
{
var childElements = document.querySelectorAll("#side-bar > *" )
for(var i = 0 ; i < childElements.length ; i++)
{
childElements[i].style.display = 'none';
}
});
Add a class such as "hideMe" to every all elements you want to hide, then on button click you can fire this function:将 class 添加到您要隐藏的所有元素中,例如“hideMe”,然后单击按钮即可触发此 function:
let children = document.querySelectorAll(".hideMe");
function hide() {
for (var i = 0; i < children.length; ++i) {
children[i].style.display = 'none';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.