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

这是code in action。