jquery next by class 淡出
<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。
<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();
};
});
The Code doesn't work. I want to fade out only the next div.formbody.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
首先,我们需要将
id="formheadtop"
更改为class="formheadtop"
,因为ID
必须是唯一的。然后您可以使用此代码淡入和淡出DIV
:jQuery
您可以缩短
$(this).parent().next('.formbody ')
到$(this).parent().next().fadeIn()
,但我放入了选择器,以防万一您想在中间插入一些东西。HTML
我默认将复选框选中。如果没有,您需要隐藏
formbody
标记中的内容。这是实际代码。
First we'll need to change
id="formheadtop"
toclass="formheadtop"
, sinceID
s must be unique. Then you can use this code to fade in and out theDIV
s:jQuery
You could shorten
$(this).parent().next('.formbody')
to$(this).parent().next().fadeIn()
, but I put in the selector, just in case you ever want to put something in between.HTML
I made the checkboxes checked by default. If not, you'll need to hide the content in the
formbody
tags.Here's the code in action.