2

ユーザーがラジオボタンをクリックしたときにコンテンツを非表示/表示する簡単な方法を作りたいです。ID を何度も使用するのではなく、クラスを使用してより普遍的なセレクターを作成し、サイト全体に再適用できるようにしたいと考えています。

.next .radio-show-content を見つけるために、親 div (.radio-show) の外に出ていないと思いますか?

$('.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 -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 に答える