如果父 div 具有特定的类，则使用 JS 切换另一个 div

Question

如果父 div 使用 JS 有特定的 class，我如何显示 div？

在下面的代码中，只有当下面的父 div 具有 class .matched 和孩子div 有class .gray。

并且，div 和 class .hidden-purple 仅当 div 下面的父级具有 class .matched 并且子级 div 具有 @987654334 @.紫色。

<div class="hidden-gray">
Display this div only if parent div has class .matched AND child div has class .gray
</div>

<div class="hidden-purple">
Display this div only if parent div has class .matched AND child div has class .purple
</div>

<div class="turn matched" id="1">
    <div class="tile gray">
        <div class="face front" style="background-color: transparent;">
            <img src="https://via.placeholder.com/336x221">
        </div>
    </div>
</div>
      
<div class="turn matched" id="2">
    <div class="tile purple">
        <div class="face front" style="background-color: transparent;">
            <img src="https://via.placeholder.com/336x221">
        </div>
    </div>
</div>

CSS

 .mystyle {
 width: 100%;
 padding: 25px;
 background-color: coral;
 color: white;
 font-size: 25px;
 box-sizing: border-box;
 }

.turn {
 margin-top: 10px;
}

.hidden-gray {
 padding: 20px;
 background-color: gray;
 color: white;
 margin-bottom: 10px;
}

.hidden-purple {
 padding: 20px;
 background-color: purple;
 color: white;
 margin-bottom: 10px;
}

非常感谢！

JSFiddle here

Answer 1

这是一种方法。这是我添加的JS代码：

let x = document.getElementById("1");
let y = document.getElementById("2");
let firstChildx = x.children;  
let firstChildy = y.children; 

if (x.className.indexOf('matched') != '-1' && firstChildx[0].className.indexOf('gray')!= '-1') {
let hideg = document.getElementsByClassName("hidden-gray");
hideg[0].style.display = 'block';
}

if (y.className.indexOf('matched') != '-1' && firstChildy[0].className.indexOf('purple')!= '-1' ) {
let hideg = document.getElementsByClassName("hidden-purple");
hideg[0].style.display = 'block';
}

我将.hidden-gray和.hidden-purple设置为display:none;，然后使用js代码检查父div的类名和父div的第一个孩子，如果它符合我设置显示的条件返回阻止。

它在这里工作：

let x = document.getElementById("1");
let y = document.getElementById("2");
let firstChildx = x.children;  
let firstChildy = y.children; 

if (x.className.indexOf('matched') != '-1' && firstChildx[0].className.indexOf('gray')!= '-1') {
let hideg = document.getElementsByClassName("hidden-gray");
hideg[0].style.display = 'block';
}

if (y.className.indexOf('matched') != '-1' && firstChildy[0].className.indexOf('purple')!= '-1' ) {
let hideg = document.getElementsByClassName("hidden-purple");
hideg[0].style.display = 'block';
}

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}

.turn {
  margin-top: 10px;
}

.hidden-gray {
  padding: 20px;
  background-color: gray;
  color: white;
  margin-bottom: 10px;
  display: none;
}

.hidden-purple {
  padding: 20px;
  background-color: purple;
  color: white;
  margin-bottom: 10px;
  display: none;
}

<div class="hidden-gray">
Display this div only if parent div has class .matched and child div has class .gray
</div>

<div class="hidden-purple">
Display this div only if parent div has class .matched and child div has class .gray
</div>


<div class="turn matched" id="1">
        <div class="tile gray">
            <div class="face front" style="background-color: transparent;">
                <img src="http://via.placeholder.com/336x221">
            </div>
        </div>
    </div>
  
  <div class="turn" id="2">
        <div class="tile purple">
            <div class="face front" style="background-color: transparent;">
                <img src="http://via.placeholder.com/336x221">
            </div>
        </div>
    </div>

Answer 2

你可以试试this。

首先，添加.hidden 类来隐藏你的hidden-* div。

.hidden {
  display: none;
}

并添加js（检查链接）。