4

久しぶりのブラウザ、初めてのポスター。

私がやりたいことは、ドロップダウン メニューに表示する週数をユーザーに選択させ、その数の div を表示させることです。現在、1 つまたはすべての div を表示できるようにセットアップしていますが、以前の div に対しても実行したいと考えています。

今私は持っています：

<SELECT name="number_of_weeks" id="number_of_weeks">
<OPTION value = "week1">1</OPTION>
<OPTION value = "week2">2</OPTION>
<OPTION value = "week3">3</OPTION>
</SELECT>

<div id = "week1" class = "weekmenu">
Week 1 </br>
</div>
<div id = "week2" class = "weekmenu">
Week 2 </br>
</div>
<div id = "week3" class = "weekmenu">
Week 3 </br>
</div>

そしてJavaScriptの場合：

$(document).ready(function () {
        $('.weekmenu').hide();
        $('#week1').show();
        $('#number_of_weeks').change(function () {
            $('.weekmenu').hide();
            $('#'+$(this).val()).show();
        });
    });

出力は次のようになります。week1 が選択されている場合、week1 div のみが表示されます。週 2 を選択すると、週 1 と週 2 の両方の div が表示されます。週 3 を選択すると、週 1、週 2、週 3 の div が表示されます。

私はこれについて頭を悩ませてきました...ネストされたdivをいくつか作成しようとしましたが、うまくいきませんでした。また、複数の div に独自のクラスを与えてから、それらを表示しようとしました。

JSFiddle: http://jsfiddle.net/meRcr/21/

どんな助けでも大歓迎です！

4

4 に答える 4

2

これを試して：-

$('#' + $(this).val()).prevAll('.weekmenu').andSelf().show();が鍵です。

.prevAll()は、セレクターに一致するすべての前の兄弟を取得し.weekmenu、それ自体も使用andSelf()してコレクションに含めます。

$(document).ready(function () {
    $('.weekmenu').hide();
    $('#week1').show();
    $('#number_of_weeks').change(function () {
        $('.weekmenu').hide();
        $('#' + $(this).val()).prevAll('.weekmenu').andSelf().show();
    });
});

フィドル

于 2013-05-17T03:54:50.770 に答える
2

jQuery の最後の行を次のように変更するだけです。

  $('#' + $(this).val()).prevUntil('select').addBack().show();

jsFiddle の例

完全なコード:

$(document).ready(function () {
    $('.weekmenu').hide();
    $('#week1').show();
    $('#number_of_weeks').change(function () {
        $('.weekmenu').hide();
        $('#' + $(this).val()).prevUntil('select').addBack().show();
    });
});
于 2013-05-17T03:52:11.070 に答える
0

このようなことを試してみてください。テストはしていませんが、うまくいくと思います:)

$(document).ready(function () {
    $('.weekmenu').hide();
    $('#week1').show();
    $('#number_of_weeks').change(function () {
        $('.weekmenu').hide();

        var weekNumbers = $(this).val();
        for(var i = 1; i<= weekNumbers; i++) {
            $('#week' + i).show();
        }
    });
});
于 2013-05-17T03:52:26.650 に答える
0

カスケード アプローチを使用します。data-*属性による親子関係を持つ。各 div で、属性に以前の div id を含めます。data-parentid="2". 次に、parentid のない div に到達するまで、機能をチェーンし続けることができます。どのように選択してもレイアウトを変更でき、この関係は損なわれません。

于 2013-05-17T03:56:11.680 に答える