¿Cómo puedo mostrar un div si un div principal tiene una class específica usando JS?
En el siguiente código, me gustaría mostrar el div con class .hidden-gray solo si el div principal a continuación tiene class .matched y el div child tiene class .gray .
Y, el div con class .hidden-purple solo si el padre debajo del div tiene class .matched y el div hijo tiene 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; }¡Muchas gracias!
Esta es una forma de hacerlo. Aquí está el código JS que agregué:
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'; } Configuré .hidden-gray y .hidden-purple para display:none; y luego usé el código js para verificar los nombres de clase del div principal y el primer hijo del div principal y, si coincidía con los criterios, configuré la pantalla nuevamente para bloquear.
Y aquí está funcionando:
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>