的jQuery淡出

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

Answer 1

首先，我們需要將id="formheadtop"更改爲class="formheadtop"，因爲ID必須是唯一的。然後你可以使用此代碼進出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標籤的內容。

這裏的code in action。