2

我想制作一个简单的方法来在用户单击单选按钮时隐藏/显示内容。我不想一遍又一遍地使用 ID,而是想使用类制作一个更通用的选择器,这样我就可以在整个站点中重新应用它。

我想我没有在父 div (.radio-show) 之外找到 .next .radio-show-content?

$('.radio-show input:radio').click(function() {
        $(this).closest('div').next().find('.radio-show-content').fadeToggle(250).toggleClass('hide'); 
});


<div class="radio-show" > 
<label class="radio span1">
    <input type="radio" name="project" value="option1" checked>
    Yes
</label>
<label class="radio span1">
    <input type="radio" name="project" value="option2">
    No
</label>
</div>

<hr />
<div class="radio-show-content"><!-- yes -->
    Show this if Yes
</div>
<div class="radio-show-content hide"><!-- no-->
    Show this if No
</div>
4

3 回答 3

0

.next正在获取<hr>. 真的,没有必要爬上 DOM 树。您可以使用:

$(".radio-show-content").fadeToggle(250).toggleClass('hide')

但是,这可能无法满足您的需求,因为它没有选择特定的.radio-show-content. 您可以基于单选按钮索引进行链接(get with.index和 get the -show-contentwith .eq),或者只使用 CSS 过渡.hide并一致地切换它。

于 2013-01-22T17:44:40.750 回答
0

我认为你应该尝试不.find()

$(this).closest('div').next('.radio-show-content').fadeToggle(250).toggleClass('hide');
于 2013-01-22T17:46:25.003 回答
0

这个插件就是为此而写的。免责声明:我写的

http://techfoobar.com/jquery-next-in-dom/

$('.radio-show input:radio').click(function() {
    $(this).nextInDOM('.radio-show-content').fadeToggle(250).toggleClass('hide');
});
于 2013-01-22T17:46:45.293 回答