0

私のコードは次のようになります

<div id=resultsdiv >
<div id=xxxx class=container>
<a> class=results </a>
<a> class=results </a>
<div id=zzzz class=default>
<p> some default data </p>
</div>
</div>
</div>

「デフォルトのみ」というボタンがあり、ボタンをクリックすると、すべての結果クラス要素が非表示になり、デフォルトのクラス div のみが表示され、コンテナ div のいずれかにデフォルトのクラス div がない場合に備えて、も非表示にする必要があり、ボタンをもう一度クリックすると、すべてが逆になりますここで、内部のdivが動的に作成されるため、IDが何であるかわかりません。探しているものを達成する方法はありますか?クラス名のみを使用していますか？

4

3 に答える 3

2

jQuery ソリューションで問題ない場合は、次のコードを使用します。

$("#default_only_button_id").on("click", function() {
    $(".container div:not(.default)").toggle();

    if($(".container .default").length == 0) {
        $(".container").toggle();
    }
});

編集：

@ckarmannの提案に従って修正

EDIT2：

編集したコードを実際にテストしたわけではありませんが、動作するはずです ;)

于 2013-01-30T19:55:49.400 に答える
1

JavaScript の使用:

document.getElementsByClassName(className)

詳細を読む: https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName

jQuery の使用:は CSS クラス セレクターです。詳細については、http: $('.results').hide(); //www.w3schools.com/jquery/sel_class.aspを参照してください。.results

于 2013-01-30T19:57:38.213 に答える
0

getElementsByClassName古いブラウザー (特に IE8) ではサポートされていません。そのようなオーディエンスをターゲットにしている場合は、純粋な JS ルートとして次のようなものを検討できます。

var x = document.getElementById("resultsdiv").getElementsByTagName("div");
for( var i = 0; i < x.length; i++)
    if(x[i].className == "results") //check other className's as desired
        x[i].style.display = "none";

parentNodeDOM をナビゲートするためのツールもあります。こちらを参照してください。

このアプローチを使用しても、他のクロスブラウザーの問題が残る可能性があることに注意してください。たとえば、単一の値ではなくスペースで区切られた複数のクラスを含むクラス プロパティです。jQuery のようなフレームワークが役立つ理由の 1 つです。

于 2013-01-30T20:15:26.960 に答える