如何让我的div消失点击显示什么是其下

Question

我有类div一个hide。它实质上是一个带有黑色背景div。这div是假设隐藏food股利。所以，当你点击黑色背景，又名如果你click在hide格，它是假设使所有hide div的消失，显示food股利。不过，我的问题是，这种情况并非如此。该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

动画/过渡一堆相同类型或类的元件时我喜欢使用一个委托模式。加入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/

Answer 2

你的问题是多么的divs被呈现时，hide的div被第一个呈现比食物divs在他们之上，因为他们都有position: absolute的风格。只是重新安排他们的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>

或改变z-index的div的hide比那些food的div更高：

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

你的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"
    }
}

Answer 3

该getElementsByClassName()返回与指定的类名的文档中的所有元素的NodeList集合，并在你的情况，.hide。

这样做document.getElementByClassName('hide').style不指定该索引将不会工作，因为它是一个列表。

您将需要通过节点列表进行迭代，或者特别是在节点列表中选择指标加以指定

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

要隐藏的节点列表的所有元素，你可以这样做：

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

Answer 4

一种解决方案是添加更多z-index到hide元件。此外，请注意getElementsByClassName()将返回HTMLCollection，不只是一个元素，你期待。所以，你将不得不遍历集合到里边反样式应用到每个元素。

function make_disappear()
{
    var elems = document.getElementsByClassName('hide');

    for (let e of elems)
    {
        e.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;
    z-index: 99;
    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>