Question

按下按钮时如何隐藏 div 元素内的子元素？（不隐藏父元素）

2021-04-24

1537

javascript html

我的 html 文件中有一个侧边栏，我想在其中放置各种内容。但是，我真的无法将所有内容都放进去。我想隐藏父 div side-bar 中的默认子元素。起初，我尝试创建一个循环，遍历所有子元素并将其样式更改为 style.display = 'none'; 。这没有奏效。我收到错误消息： code.js:128 Uncaught TypeError: 无法设置未定义的属性“display”

我目前要实现目标的代码是（在 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';
        }
});

我很感激任何人能给出的答案，但我的代码中没有使用 Jquery，所以我希望得到一些 javascript 答案。

我的 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>

这是我制作的整个侧边栏 div。这里除了栏之外的所有内容都是我想隐藏的，以便放置其他元素。

Answer 1

向每个要隐藏的元素添加一个类（如“hideMe”），然后单击按钮即可触发此功能：

let children = document.querySelectorAll(".hideMe");
function hide() {
  for (var i = 0; i < children.length; ++i) {
    children[i].style.display = 'none';
  }
}

Answer 2

您可以使用 #side-bar > * 作为选择器来选择侧边栏的子元素，然后可以循环遍历它们以通过编程方式隐藏它们。

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';
        }
});