2017-10-11 10 views
1

Je dois modifier la propriété d'affichage d'un autre élément si un élément spécifique a display:none.Modifier la visibilité d'un autre élément si aucun affichage n'est présent dans jQuery

if ($("#first-layer").css('display') === 'none') { 
 
    $("#second-layer").removeAttr("visibility"); 
 
}
#second-layer { 
 
    color: black; 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 150px; 
 
    background: yellow; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    visibility: hidden; // here I have to change by jQuery 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<header> 
 
    <div id="first-layer"> 
 
    <div id="header-elements"> 
 
     <div id="img-rain" class="animated fadeIn" class="img"><img src="img/img.png"> </div> 
 
     <div id="typed-strings" class="text"> 
 
     <span class="animated fadeInUp" id="typed"></span> 
 
     <br/> 
 
     <span class="description animated fadeIn">Your weather in one place</span> 
 
     </div> 
 
    </div> 
 
    <div id="typed-strings"> 
 
    </div> 
 
    <div class="start"> 
 
     <button type="button" class="btn btn-primary btn-lg responsive-width button-      bg-clr animated fadeIn">Get Started</button> 
 
    </div> 
 
    </div> 
 
    <div id="second-layer">123</div> 
 

 
</header>

J'ai essayé des solutions de l'internet, mais ils ne travaillaient pas.

+0

visibilité: masqué; n'est pas un attribut de sorte que vous ne pouvez pas le cibler avec removeAttr –

Répondre

1

Votre code ne vous fera probablement rien à l'heure actuelle, mais un temps plus facile avec

if ($("#first-layer").not(":visible")) { // or .is(":hidden") 
    $("#second-layer").show(); 
} 

ou

$("#second-layer").css({visibility:visible}); 

depuis les déclarations CSS sont les attributs non

En savoir plus sur la détection ici Difference between :hidden and :not(:visible) in jQuery

+0

Merci beaucoup :) Résultat: Je réglerai css pour l'affichage de deuxième couche: aucun et JS je mets ceci: if ($ ("# premier -layer "). is (": hidden ")) { $ (" # deuxième couche "). css ('display', 'block'); } – Remax

1

en utilisant jQuery(":hidden")

// if selector is none then 
if($('#first-layer').is(":hidden")){ 

    // alter second-layers visibility 
    $('#second-layer').css('visibility', 'visible'); 
}