jquery - jquery next by class 淡出

Question

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

Answer 1

首先我们需要更改id="formheadtop"为class="formheadtop"，因为IDs 必须是唯一的。然后您可以使用此代码淡入和淡出DIVs：

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标签中的内容。

这是实际代码。