-2

リストアイテムをページ内の要素のjQueryトグルに自動的に変換したいと思います。

たとえば、次のサンプルページコードを次に示します。

<div id="page">
    <div id="menu">
        <ul>
            <li class="books">Books</li>
            <li class="cars">Cars</li>
            <li class="sausages">Sausages</li>
        </ul>
    </div>

    <div id="elements">
        <div class="books">This layer displays a range of books</div>
        <div class="cars">This layer displays a range of cars</div>
        <div class="sausages">This layer displays a range of sausages</div>
    </div>
</div>

ご覧のとおり、各メニューリスト項目と各要素DIVは、同じクラス名を共有しています。

jQueryを使用して達成したいのは、各メニューリスト項目を自動的にトグルに変換することです。これにより、要素セクションで対応するDIVをトグルできます。

したがって、基本的にメニュー項目を読み取り、そのメニュー項目に対応する要素レイヤーがあるかどうかを確認し、ある場合は、レイヤーを切り替えることができるトグルに変換する必要があります。

メニュー項目と要素レイヤーは定期的に追加および削除される可能性があり、最終的には数十のレイヤーが組み込まれる可能性があるため、動的である必要があります。

これが可能な場合は、jsFiddleでデモンストレーションしてください。

ありがとう！

編集：jQueryを使用してページ上の特定の要素を表示および非表示にする方法を知っています。ここで、要素名をコードにハードコーディングしますが、動的にする方法がわかりません。ここに投稿する前に、少なくとも2時間グーグルを試しました。

4

1 に答える 1

2

上記のコメント投稿者は、投稿にもっと力を入れる必要があるということは正しいです。SOは「宿題をしてくれる」サイトではないことを除けば、あなたの説明がわかりにくいです。一部のコード（擬似コードでさえ）が役立つでしょう。

しかし、私たちが知らないことすらわからないことがあり、それが私たちの質問を伝えるのを非常に難しくしていることを私は理解しています。だから私はあなたが何を望んでいるのか理解するのに苦労していますが、私がそれを正しく読んだら、このようなものがうまくいくはずです：

HMTL

<div id="page">
    <div id="menu">
        <ul>
            <li class="books">Books</li>
            <li class="cars">Cars</li>
            <li class="sausages">Sausages</li>
        </ul>
    </div>
    <hr />
    <div id="elements">
        <div class="books">This layer displays a range of books</div>
        <div class="cars">This layer displays a range of cars</div>
        <div class="sausages">This layer displays a range of sausages</div>
    </div>
</div>​

Javascript

$('#menu ul li').on('click', function () {
    var $matchingDIV = $('#elements div.' + $(this).attr('class'));

    $matchingDIV.toggle(!$matchingDIV.is(':visible'));
});​

これがフィドルです

LI要素に複数のクラス名を追加した場合に発生します。また、要素を最初に表示したいのか、一度に1つだけ表示するのかなどもわかりませんでした。これを使用して実行できるといいのですが、質問がある場合は質問してください。

于 2012-05-11T20:18:09.727 に答える