jQuery переключать несколько divs внутри других divs независимо

Question

Я проверил связанные вопросы, но я не нашел правильную комбинацию вещей, чтобы сделать эту работу.

Я пытаюсь скрыть/показать div внутри другого div. На каждую страницу размещено 20 таких разделителей.

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

Я пытаюсь показать класс = "body" div, который установлен для отображения: none; в css.

Я попытался использовать функции jQuery toggle(), toggleClass() без успеха.

Вот что у меня есть.

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

Я знаю, что это очень маленький кусочек кода, к сожалению, я только начал изучать JQuery и не знаю, как из этого исходить.

Answer 1

Вы пробовали положить его в onready функции. Как так:

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

Собираем в этой функции гарантирует, что он будет работать после того, как документ был полностью загружен ... В противном случае он будет пытаться присоединить обработчик щелчка к элементу, который еще не загружен (и поэтому, не существует).

Answer 2

Я думаю, вам нужно выбрать, что вы хотите переключить с другого класса, если хотите снова скрыть его. Переключение класса body приведет к удалению его из свинки div, когда вы снова нажмете на 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 щелкнутого WRAPPER. Опуская $(this) причины ВСЕ дивы ТЕЛА для переключения, несмотря на обертке они находятся.

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