親チェックボックスのクリック時に子チェックボックスを表示

Question

私は、視聴者グループの下にチェックボックスが隠された視聴者グループを持っています。今、これらの隠しチェックボックスをオーディエンスグループ名をクリックして表示したいと思います。

あなたはここで使用してコードイムの詳細を参照することができます：次のjQueryコードを使用して

<div class='audience-group'> 
    <input type='checkbox' class='audience-group-checkbox' value='9' /> 
    <div class='audience-group-name'> 
     JGG Enterprises 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='7' /> 
    <div class='audience-name'> 
     Mucho, George 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='9' /> 
    <div class='audience-name'> 
     Bo, Jen 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='10' /> 
    <div class='audience-name'> 
     Gin, Junto 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='12' /> 
    <div class='audience-name'> 
     Molina, Greg 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='36' /> 
    <div class='audience-name'> 
     Berkely, Dada 
    </div> 
</div> 
<div class='audience-group'> 
    <input type='checkbox' class='audience-group-checkbox' value='8' /> 
    <div class='audience-group-name'> 
     GBA Inc. 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='1' /> 
    <div class='audience-name'> 
     Kapate, Jones 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='2' /> 
    <div class='audience-name'> 
     Bingo, Gringo 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='4' /> 
    <div class='audience-name'> 
     Doe, John 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='8' /> 
    <div class='audience-name'> 
     Merio, Horhe 
    </div> 
</div> 
<div class='audience'> 
    <input type='checkbox' class='audience-checkbox' value='35' /> 
    <div class='audience-name'> 
     Dalisay, JM 
    </div> 
</div> 

イム：

$（文書）

http://jsfiddle.net/CnmEA/は、私はこれらのサンプルのHTMLコードを持っています。準備完了（関数（）{

$('.audience-group-name').each(function(){ 

    $(this).click(function(){ 

     $(this).find('.audience').show(); 
    }); 
});  

}）;

私はjQueryを少し新しくしてくれました。何か助けてくれてありがとう！

Answer 1

ここで働い例です：http://jsfiddle.net/CnmEA/5/

、変更JS：

$('.audience-group-name').click(function() { 
     $(this).parent().nextUntil('.audience-group').show(); 
}); 

あなたのJSの主な問題は$(this).find('.audience').show()ました。 jQuery find()メソッドは、メソッドを呼び出すjQueryオブジェクトの子孫を探します。この場合、そのオブジェクトは$(this)であり、これはクラス.audience-group-nameの要素を指します。ただし、表示する要素はその要素の子孫ではありません。 1つ上のレベル（.parent()）に移動し、次の要素をすべて選択して、クラス.audience-groupの次の要素に到達する必要があります。

コードから.each()メソッドを削除したことに気づくでしょう。 clickイベントを$('.audience-group-name')にバインドすると、そのクラスのすべての要素にバインドされます。これらの要素の1つがクリックされると、$(this)が正しいコンテキストを提供するため、正しい要素が表示されます。これはクリックされた実際の要素を提供するので、DOMトラバーサルメソッド.parent().nextUntil(...)は正しい要素を見つけるでしょう。

Answer 2

find()機能が子供、あなたの選択の要素のを探します。親の兄弟を探す必要がありますlike so

一般的な設計上の注意：ツリー構造を構築する際に古典的なHTMLミスがあります。左寄せに余白/余白をエミュレートします。適切な方法は、.audience-grouplike soの中に.audienceを配置することです。これにより、管理がさらに容易になります。