Appliquer la classe à l'élément si div est caché ou visible

Question

Vérifiez mon exemple ici: http://timkjaerlange.com/foobar/test.html

J'essaie actuellement d'appliquer une classe à un en-tête en fonction de la visibilité d'un div sur la page.

Ceci est mon balisage:

<a href="#">Toggle visibility!</a> 

<div></div> 

<h1 class="one">If the box is hidden this headline should be italic.</h1> 
<h1 class="two">If the box is visible this headline should be italic.</h1> 

Et ce sont les classes qui sont en jeu:

.hideIt { 
display: none; 
     } 

.ifHidden { 
font-style: italic; 
     } 

.ifVisible { 
font-weight: italic; 
     } 

jQuery ajoute le comportement:

$('a').click(function() { 
$('div').toggleClass('hideIt'); 
if ($('div').is(':hidden')) { 
    $('h1.one').addClass('ifHidden'); 
    $('h1.one').removeClass('ifVisible') 
    } 
if ($('div').is(':visible')) { 
    $('h1.two').addClass('ifVisible'); 
    $('h1.two').removeClass('ifHidden'); 
    } 
}); 

Initialement, il fonctionne, quand Je clique sur l'ancre, h1.one est en italique, mais quand je clique à nouveau, rien ne se passe. Je suis un peu un Javascript, jQuery n00b, donc n'importe quelle indication de ce qui pourrait être mal est fortement appréciée!

Answer 1

Il y a quelques problèmes. Premièrement:

.ifVisible { 
    font-weight: italic; 
} 

L'italique n'est pas une valeur valide pour le poids de police. C'est pour le style de police. Deuxièmement, votre logique est un peu bizarre. Si div est masqué, ajoutez ifHidden et supprimez ifVisible de h1.one. Si div est visible, vous ajoutez ifVisible et supprimez ifHidden de h1.two. Chose est que vous n'ajoutez jamais la classe que vous supprimez. Je ne suis pas sûr que vous faites ce que vous voulez.

Answer 2

Le poids de police dans .ifVisible a une valeur incorrecte, donc ne changera rien. Try here for allowed values