0

次のような状況で助けを求めたいと思います:

div DIV1、DIV2、DIV3およびがあるとしましょうDIV4。
との選択肢があるドロップダウンメニューがCHOICE1あるCHOICE2としますCHOICE3。

以下に説明する機能を実現したいと思います。

  • ユーザーが を選択した場合、その他CHOICE1を表示DIV1、非表示にします。
  • CHOICE2ユーザーが、表示DIV1、を選択した場合DIV3、その他を非表示にします。
  • CHOICE3ユーザーが、 show DIV2、DIV3およびを選択した場合、DIV4その他を非表示にします。

あなたはアイデアを思いついたと思います:-) 助けてくれてありがとう、チャーリー。

4

3 に答える 3

1

このようなこともできます。クリックするとクリックしたアイテムのインデックスを取得し、対応する一連のdivを開くメニューアイテムがあります。このアプローチの唯一のトリックはdivであり、メニュー項目のリストは同じ順序である必要があります。

$(document).ready(function() {
    $('.menu-container li').click(function(){
        var clickedIndex = $(this).index();
        $('.div-container div').css('display', 'none');
        $('.div-container div').eq(clickedIndex).css('display', 'block');
    });
});

幸運を、

于 2012-09-22T12:38:58.380 に答える
0

これを試して：

$(document).ready(function(){
    $("#choice").change(function(){
        $("div[id^='div']").hide();                
        var val = $(this).val();
        if(val == "CHOICE1"){
           $("#div1").show();
        }
        if(val == "CHOICE2"){
           $("#div1").show();
           $("#div3").show();
        }
    })
})​

デモはこちら: http://jsfiddle.net/6Vxw5/

于 2012-09-22T10:57:26.467 に答える
0

ちょっとしたアイデア: 0.あなたの選択のようなものです...

<select name="mySelect">
    <option value="0">a</option>
    <option value="1">b</option>
</select>

1.- オプション値を div に関連付ける配列を設定します。

var myDivs = [["div1"], ["div2", "div3"]]

2.- トグル表示機能 onchange を設定します。

jQuery('select').change(toggleDivVisibility);

3.- 関数を定義します。

function toggleDivVisibility() {
    jQuery('div').css('display', 'none');
    var divIds = myDivs[this.value];
    for(var d = 0, maxD = divIds.length; d++; d < maxD) {
        var divId = divIds[d];
        jQuery("#"+divId).css('display', 'block');
    }
}

もちろん、いくつかの行を改善する必要がありますが、その考えは理解できると思います。

于 2012-09-22T11:04:47.813 に答える