Javascript 如何使div在单击时消失并显示其下的内容

我有一个

div

类

hide

。它本质上是一个

div

，背景为黑色。这个

div

应该隐藏

food

div。因此，当你点击黑色背景时，也就是如果你在

hide

div上点击

，它应该使所有
hide
div消失，并显示
food
div。然而，我的问题是，这并没有发生。
hide
div未显示。以下是我目前的代码：


函数使_消失（）{
document.getElementByClassName（'hide'）.style.display='none'；
}
.main{
位置：相对位置；
显示：内联块；
宽度：120px；
高度：120px
保证金：5px；
背景：红色；
}
.隐藏{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
背景：url(https://i.imgur.com/Y8B7LsB.jpg);
}
.食物{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
}
你的问题在于
div
是如何呈现的，而
hide
div比food
div
首先呈现，因为它们都有
位置：绝对的
风格。只需按如下方式重新排列他们的html：

<div class="main">
    <div class="food"><img alt="Food!!" src="https://i.imgur.com/1lbkAaY.jpg"></div>
    <div onclick="make_disappear()" class="hide"></div>
</div>

您的JS也无法工作，因为正如@wentjun所指出的，
document.getElementsByClassName
返回一个节点列表。您只需在列表中循环以更改每个显示样式，如下所示：

function make_disappear(){
    var hideDivs = document.getElementsByClassName('hide')
    for (var i = 0 ; i < hideDivs.length; i++) {
        hideDivs[i].style.display = "none"
    }
}

函数使_消失（）{
var hideDivs=document.getElementsByClassName（'hide'）
对于（变量i=0；i
getElementsByClassName（）
返回文档中所有元素的节点列表集合，该集合具有指定的类名，在您的示例中为
.hide

如果不指定索引，则执行document.getElementByClassName（'hide'）.style
操作将不起作用，因为它是一个列表

您将需要遍历节点列表，或者特别选择节点列表中的索引来定位它

document.getElementsByClassName('hide')[0].style.display = 'none';

要隐藏节点列表中的所有元素，可以执行以下操作：

[...document.getElementByClassName('hide')].map(node => node.style.display = 'none')

一种解决方案是向
隐藏
元素添加更大的
z索引。另外，请注意，它将返回一个，而不仅仅是您所期望的一个元素。因此，您必须在集合上循环以将样式应用于每个元素


函数使_消失（）
{
var elems=document.getElementsByClassName（'hide'）；
for（让e为元素）
{
e、 style.display=“无”；
}
}
.main{
位置：相对位置；
显示：内联块；
宽度：120px；
高度：120px
保证金：5px；
背景：红色；
}
.隐藏{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
z指数：99；
背景：url(https://i.imgur.com/Y8B7LsB.jpg);
}
.食物{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
}
我喜欢在设置/转换一组相同类型或类的元素的动画时使用委托模式。在将
z-index:1
添加到
.hide
元素以使它们按堆叠顺序“位于”图像的顶部之后，我在单击任何
.hide
元素时向
主体添加一类
消失
。
CSS
处理其余部分，同时淡出所有
.hide
元素。如果
body
在
DOM
中感觉太高，那么这种方法也可以用于包装器元素


const hide=document.querySelectorAll（'.hide'）；
函数handleClick（）{
document.body.classList.add（'消失'）；
}
hide.forEach（el=>{
el.addEventListener（'click'，handleClick）；
});
.main{
位置：相对位置；
显示：内联块；
宽度：120px；
高度：120px边距：5px；
背景：红色；
}
.隐藏{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
背景：url(https://i.imgur.com/Y8B7LsB.jpg);
z指数：1；
过渡区：5s不透明度；
}
.消失，躲起来{
不透明度：0；
}
.食物{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
}

您看到了哪些具体的错误消息？您还需要使用getElementsByClassName而不是GetElementByClassName。您是否按照标签中的建议使用了jquery？是否有一种方法可以让
食物
div被黑色图像隐藏。然后单击黑色图像，所有的
食物
div都会消失，而不使用循环？嗯。。我已经更新了它，但是我使用了map操作符。我可以知道为什么您不想使用for循环吗？我相信它也实现了同样的功能。有没有一种方法可以在不使用循环的情况下隐藏div？@Shidersz通过将上下文传递给函数来实现这一点。你要么让它们通过单独的点击消失，要么使用循环。我想让它在一次点击中消失所有的黑色图像。因此，如果单击一个黑色图像，所有的黑色图像disappear@Maggie我将对此进行更新，基本上，您必须循环匹配的元素。。。
[...document.getElementByClassName('hide')].map(node => node.style.display = 'none')