應用類元素，如果DIV是隱藏還是可見這裏

Question

看看我的例子：http://timkjaerlange.com/foobar/test.html

目前，我想要一類適用於基於頁面上的div的可見性的標題。

這是我的標記：

<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> 

而且這些都是在遊戲類：

.hideIt { 
display: none; 
     } 

.ifHidden { 
font-style: italic; 
     } 

.ifVisible { 
font-weight: italic; 
     } 

jQuery的添加行爲：

$('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'); 
    } 
}); 

最初，它的工作原理，當我點擊錨點，h1.one被表示化了，但是當我再次點擊時什麼也沒有發生。我有些Javascript，jQuery n00b，所以任何暗示可能是錯誤的高度讚賞！

Answer 1

有幾個問題。首先：

.ifVisible { 
    font-weight: italic; 
} 

斜體不是字體權重的有效值。它是用於字體樣式的。其次，你的邏輯有點不可思議。如果div隱藏，則添加ifHidden並從h1.one刪除ifVisible。如果div可見，則添加ifVisible並從h1.two移除ifHidden。事情是你永遠不會添加你正在刪除的課程。我不確定你在做你想做的事。

Answer 2

.ifVisible中的font-weight具有不正確的值，因此不會更改任何內容。 Try here for allowed values