jQueryは他のdiv内の複数のdivを個別に切り替えます

Question

関連する質問を確認しましたが、この作業を行うための適切な組み合わせが見つかりませんでした。

私は別のdiv内でdivを表示/非表示しようとしています。 1ページに20個のラッパーdivがあります。

<div class="wrapper"> 
    <div class="date"></div> 
    <div class="subject"></div> 
    <div class="who"></div> 
    <div class="body"></div> 
</div> 

表示するように設定されているclass = "body" divを表示しようとしています。 in css。

jQueryのtoggle（）、toggleClass（）関数を使用してみましたが、成功しませんでした。

これまでのところ私はこれを持っています。

$('.wrapper').click(function() { 
    $('.body').toggle(); 
}); 

私は悲しそうに私はjQueryのを学ぶために始めた、これから続行する方法がわからない、それはコードの非常に小さな作品を知っています。

Answer 1

あなたはonready機能でそれを入れてみました。この機能でそれを置く

$(function() { 
    $('.wrapper').click(function() { 
    $('.body').toggle(); 
    }); 
}); 

ドキュメントが完全にロードされた後、それが実行されます確実に...それ以外の場合は、（まだロードされていない要素にクリックハンドラを添付してみますと：そうが好きしたがって存在しません）。

Answer 2

もう一度非表示にしたい場合は、別のクラスの切り替えを選択する必要があると思います。 bodyクラスをトグルすると、母乳から再び除外されます。これは、wrapperを再度クリックすると選択できません。

<div class="wrapper"> 
    W 
    <div class="date">d</div> 
    <div class="subject">s</div> 
    <div class="who">w</div> 
    <div class="body isbody">b</div> 
</div> 

とJavaScript：

$('.wrapper').click(function() { 
    $(this).children('.isbody').toggleClass('body'); 
}); 

http://jsfiddle.net/vuBNd/

Answer 3

JSFiddle（http://jsfiddle.net/XGsVE/3/）をご覧ください。このコードは、クリックされたラッパーのBODY divを切り替えます。 $(this)はこの作品

$('.wrapper').click(function() { 
    $(this).find('div.body').toggle(); 
});