web-dev-qa-db-ja.com

Jquery：すべての子を非表示にしてから特定の要素を表示する

Div内のすべての子要素を非表示にします。そして、関数に渡された特定のものを表示します。

_function subDisplay(name) {
   $("#navSub").each(function() {
      $(this).hide();
   });
   $(name).show();
}
_

次に、次のようなonmouseイベントから関数を呼び出します：subDisplay(#DivIwantToShow);しかし、何も表示されません...

何が間違っていますか？

javascriptjqueryhideshow
35
Christian Bekker

含まれているdivではなく、子を非表示にする必要があります。

$("#navSub").children().hide();

そのため、表示しようとしているdivが親divの要素である場合、他のdivは非表示のままになります。

77
Brandon Kindred

#navSubの子をターゲットにしている場合は、エレメントnavSubではなく、それらをターゲットにして非表示themにする必要があります; children() メソッドを使用して実行できます。

function subDisplay(name) {
    $('#navSub').children().hide();
    $(name).show();
};

そうでない場合、DOMに同じIDを持つ複数の要素があるように見えますが、これは許可されていません。

次に、文字列（有効なjQueryセレクター）をsubDisplay()に渡す必要があります。

subDisplay('#DivIwantToShow');
3
Matt

@dotwebと@Mattからのすばらしいコメントを要約します。

function subDisplay(name) {
   $('#navSub').hide();
   $(name).show();
}

subDisplay('#DivIwantToShow');
1
Stefan

要素の名前がnameで渡される場合、これを使用します：

    if($(this).attr('name') != name){
    //Hide it
    } else {
   //show it
}
1
Teun Pronk
function subDisplay(name) {
   $("#navSub").hide();
   $('#'+name).show();
}
0
kaz

次のように、ループの外側に置いてみてください。

function subDisplay(name) {

     $("#navSub").hide();

     $(name).show();
}

http://jsfiddle.net/peduarte/m2pj8/

0
peduarte