How can I display a div
if a parent div
has a specific class
using JS?
In the code below I would like to display the div
with class
.hidden-gray only if parent div below has class
.matched and child div
has class
.gray .
And, the div
with class
.hidden-purple only if parent below div has class
.matched and child div
has class
.purple .
<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;
}
Many thanks!
You can try this .
First, add .hidden
class to hide your hidden-*
div.
.hidden {
display: none;
}
and add js (check the link).
Here's one way of doing it. Here's the JS code I added:
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';
}
I set .hidden-gray
and .hidden-purple
to display:none;
and then used the js code to check through the class names of the parent div and the first child of the parent div and if it matched the criteria I set the display back to block.
And here it is working:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.