javascript - How do I make div disappear on click and show what is under it

Question

I have a div with class hide. Its essentially a div with a black background. This div is suppose to hide the food div. So, when you click on the black background, aka if you click on the hide div, it is suppose to make all the hide div's disappear and show the food div. However, my issue is that this is not happening. The hide div is not showing up. Below is my current code:

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>

标签： javascriptjqueryhtmlcss

Answer 1

我喜欢在动画/转换一堆相同类型或类的元素时使用委托模式。添加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/