javascript - 如何让 div 在点击时消失并显示它下面的内容

Question

我有一个 div 类 hide。它本质上是一个具有黑色 背景的div。这个 div 应该隐藏 food div。所以，当你点击黑色背景时，也就是如果你在 hide div 上click 时，假设所有的 hide div 都消失了并显示 food div。但是，我的问题是这没有发生。 hide div 没有显示。以下是我当前的代码:

function make_disappear(){
    document.getElementByClassName('hide').style.display = 'none';
}

.main {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px
    margin: 5px;
    background: red;
}

.hide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: url(https://i.imgur.com/Y8B7LsB.jpg);
}

.food {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}

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

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

Answer 1

我喜欢在动画/转换一堆相同类型或类的元素时使用委托(delegate)模式。在将 z-index: 1 添加到 .hide 元素以使它们按堆叠顺序位于图像“顶部”之后，我添加了一类 disappear 到 body 当点击任何 .hide 元素时。 CSS 处理其余部分，同时淡出所有 .hide 元素。如果 body 在 DOM 中感觉太高，这种方法也可以用在包装器元素上。

const hide = document.querySelectorAll('.hide');

function handleClick() {
  document.body.classList.add('disappear');
}

hide.forEach(el => {
  el.addEventListener('click', handleClick);
});

.main {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px margin: 5px;
  background: red;
}

.hide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: url(https://i.imgur.com/Y8B7LsB.jpg);
  z-index: 1;
  transition: .5s opacity;
}

.disappear .hide {
  opacity: 0;
}

.food {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

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

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

https://jsfiddle.net/2rvte9y3/1/