1

選択時にjqueryを使用してdivを表示/非表示にするドロップダウンセレクターがあります。

<select id="dropdown" name="dropdown"
    onchange="refreshPage(this.value);">
    <option <?php if ($ap == 'ATL') print 'selected '; ?> value="ATL">Atlanta</option>
    <option <?php if ($ap == 'MIA') print 'selected '; ?> value="MIA">Miami</option>
    <option <?php if ($ap == 'MCO') print 'selected '; ?> value="MCO">Orlando</option>
</select>

div内に、以下のように親の同じ文字で始まる子divがあります

<div id="ATL">
    Atlanta
    <div id="ATL1">Put output here</div>
    <div id="ATL2">Put output here</div>
    <div id="ATL3">Put output here</div>
</div>

<div id="MIA">
    Miami
    <div id="MIA1">Put output here</div>
    <div id="MIA2">Put output here</div>
    <div id="MIA3">Put output here</div>
</div>

私が使っているJqueryは

    <script>
    $(document).ready(function () {
        function showTab( name ) {
            newname = '#' + name ;
            $('div').not(newname).hide();
            $(newname).show();
        }

        $('#dropdown').change( function() {
            showTab( $( this ).val() );
        });

        showTab( $('#dropdown').val() );

    });  // this line was missing 
</script>

問題は、選択を行うと、メインの div のみが選択されることです。Jquery行の「名前」の後にワイルドカードを含めることができる方法はありますか

 newname = '#' + name ;

name で始まるものはすべて表示されますか?

ありがとう

4

4 に答える 4

1

はい、次のようにできます。

newname = '[id^="' + name + '"]';

指定された文字列で始まるid指定された属性 (この場合は)を持つ要素を選択します。詳細については、jQuery のドキュメントを参照してください。

于 2013-07-29T20:13:25.187 に答える
0

私の提案は、クラスを使用することです

<div id="MIA" class="MIA">Miami         
<div id="MIA1" class="MIA">Put output here</div>
<div id="MIA2" class="MIA">Put output here</div>
<div id="MIA3" class="MIA">Put output here</div>
</div>

と

newname = '.' + name ;
于 2013-07-29T20:13:46.503 に答える
0

を試すことができid^=ます。これにより、ID の先頭が指定したものと一致します。あなたの場合、次のようになると思います。

$("[id^=" + name + "]")
于 2013-07-29T20:12:50.060 に答える
0

すべての div ではなく、基本的にタブ コンテナーのみを非表示にします。

<div id="tabs">
    <div id="ATL">Atlanta
        <div id="ATL1">Put output here</div>
        <div id="ATL2">Put output here</div>
        <div id="ATL3">Put output here</div>
    </div>
    <div id="MIA">Miami
        <div id="MIA1">Put output here</div>
        <div id="MIA2">Put output here</div>
        <div id="MIA3">Put output here</div>
    </div>
</div>

...

function showTab(name) {
    newname = '#' + name;
    $('tabs > div').hide();
    $(newname).show();
}

$(document).ready(function () {
    $('#dropdown').change(function () {
        showTab($(this).val());
    });
    showTab($('#dropdown').val());
});
于 2013-07-29T20:14:50.287 に答える