如果父div具有特定的類，則使用JS切換另一個div

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

在下面的代碼中，只有當下面的父 div 具有.matched并且子div具有.gray時，我才想顯示divwith class .hidden-gray。class divclass

而且，只有當 div 下面的父級具有.matched并且子級具有.purplediv時，才使用.hidden class -purple。class divclass

<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在這里

uj5u.com熱心網友回復：

你可以試試這個。

首先，添加.hidden類以隱藏您的hidden-*div。

.hidden {
  display: none;
}

并添加 js（檢查鏈接）。

uj5u.com熱心網友回復：

這是一種方法。這是我添加的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>

標籤：

上一篇：我的文本未在表格右側對齊。為什么？

下一篇：影像是移動回應的，但在桌面上沒有回應