JQuery рядом с классом исчезают - PullRequest
Новая
       11

JQuery рядом с классом исчезают

0 голосов
/ 24 июля 2010 
<div id="formheadtop">
 <input class="checkbox" type="checkbox" /></div><div class="formbody"></div>
<div id="formheadtop">
<input class="checkbox" type="checkbox" /></div><div class="formbody"></div>
<div id="formheadtop"><input class="checkbox" type="checkbox" /></div><div class="formbody"></div>



$(function() { $('input:checkbox').live('click', function () {
if ( $(this).attr('checked') == true ) 
{
    $(this).nextAll('.formbody:first').fadeIn();
}
else
{ 
$('.formbody').fadeOut();
};
});

Код не работает. Я хочу исчезнуть только следующий div.formbody.

1 Ответ

2 голосов
/ 24 июля 2010

Сначала нам нужно изменить id="formheadtop" на class="formheadtop", поскольку ID s должно быть уникальным. Затем вы можете использовать этот код для увеличения и уменьшения DIV s:

JQuery 

$(document).ready(function(){
  $('.formheadtop :checkbox').live('click', function() {
    if ($(this).is(':checked')) {
      $(this).parent().next('.formbody').fadeIn();
    }  else { 
      $(this).parent().next('.formbody').fadeOut();
    };
  });
});

Вы могли бы сократить $(this).parent().next('.formbody') до $(this).parent().next().fadeIn(), но я включил селектор, на случай, если вы когда-нибудь захотите поместить что-то между ними.

HTML 

<div class="formheadtop"><input class="checkbox" type="checkbox" checked="checked" /></div>
<div class="formbody">test</div>
<div class="formheadtop"><input class="checkbox" type="checkbox" checked="checked" /></div>
<div class="formbody">test</div>
<div class="formheadtop"><input class="checkbox" type="checkbox" checked="checked" /></div>
<div class="formbody">test</div>

Я установил флажки по умолчанию установлен . Если нет, вам нужно скрыть содержимое в тегах formbody.

Вот код в действии .

...