3

このスクリプトに別のクラスを追加するための最良の方法は何ですか。

<script type="text/javascript">
    $(document).ready(function(){
     $('.carlocation').hide();
      $('#parking-options').change(function() {
        $('.carlocation').hide();
        $('#' + $(this).val()).show();
     });
    });
</script>

このクラスを表示する同じIDで問題ありませんが、このスクリプトに別のクラスを追加する方法がわかりません。'.carlocation' , '.insertclass' or '.carlocation .insertclass'スクリプトを壊すだけです。

ありがとう！

編集-マークアップの残りの部分。

.carlocationと.car-positionを2つの非表示のdivとして開始したいのですが、最初のドロップダウンで[セルフパーキング]を選択すると、他の2つの選択が表示されます。

<li>
                    <label for="select-choice-0" class="select">Parking Method:</label>
                    <select name="select-choice-15" id="parking-options" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                       <option value="">Select One</option>
                       <option value="self">Self Parking</option>
                       <option value="auto">Valet Parking</option>
                    </select>
                </li>
                <li>
                    <div id="self" class="carlocation">
                    <h1>Enter Car Location:</h1>
                    <label for="select-choice-0" class="select">Floor:</label>
                    <select name="select-choice-15" id="location-floor" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                       <option value="">Floor Select</option>
                       <option value="f1">F1</option>
                       <option value="f2">F2</option>
                       <option value="f3">F3</option>
                       <option value="f4">F4</option>
                    </select>
                    </div>
                </li>
                <li>
                <div id="self" class="car-position">
                <label for="select-choice-0" class="select">Row:</label>
                <select name="select-choice-15" id="position-row" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                       <option value="">Row Select</option>
                       <option value="1">1</option>
                       <option value="2">2</option>
                       <option value="3">3</option>
                       <option value="4">4</option>
                       <option value="5">5</option>
                       <option value="6">6</option>
                       <option value="7">7</option>
                </select>
                <li>
4

3 に答える 3

4

CSSで要素を非表示にします。

.carlocation, .car-position {
    display: none;
}

繰り返される「self」IDを両方のdivから削除し、代わりに「self」値を両方のクラス属性に追加します。

<li>
    <div class="self carlocation">
        <!-- ... -->
    </div>
</li>
<li>
    <div class="self car-position">
        <!-- ... -->
    </div>
</li>

補足： 2番目のdivに終了タグがありませんでした。

次に、フォームの変更イベントにバインドします。

$("#parking-options").on("change", function(){
    $("div.self").toggle( $(this).val() === "self" );
});​​​​​​​​​​

.selfこれは、「自己」である選択の値に基づいてすべてのdivの可視性に基づいています。「自己」を選択すると、すべてのdiv.selfアイテムが表示されます。そうでなければ、それらは隠されます。

フィドル： http： //jsfiddle.net/jonathansampson/5KJV5/

または、それらをスライドさせて表示することもできます。

$("#parking-options").on("change", function(){
    $(this).val() === "self"
        ? $("div.self").slideDown()
        : $("div.self").slideUp();
});​

フィドル： http： //jsfiddle.net/jonathansampson/5KJV5/2/

于 2012-06-07T22:10:49.047 に答える
1

jQueryセレクターは、セレクターの引用符内にコンマ区切りのリストを作成することで、複数のクラス（またはその他の要素）と対話できます。

$('.carlocation, .insertclass, .anotherclass').hide();

編集：大文字と小文字の区別が問題になる場合があるため、「。insertclass」は「.insertClass」と常に同じではないことに注意してください- $（。someClass）のようなJQueryクラスセレクターは大文字と小文字を区別しますか？多くのための。

すべてのセレクターを同じ引用符で囲んでいないため、最初はハングアップした可能性があります。のようにクラス間にスペースがある'.carlocation .insertclass'ということは、実際には「クラス「carlocation」を持つ要素の子であるクラス「insertclass」を持つ要素を選択する」ということです。

同じ要素のセットを複数回操作する場合は、それらを変数に割り当てることでコードを最適化できます。

var $myselection = $('.carlocation, .insertclass, .anotherclass');

（変数名に「$」を入れると、それがjQueryオブジェクトであることを思い出させるのに役立つことに注意してください。好きな名前を付けることができます）。

これで、$myselectionで通常のjQueryメソッドを使用できます。

$myselection.hide();
$myselection.show();

または後で使用します（変数が探しているスコープ内でアクセス可能である限り、最初の例では問題になりません）。

于 2012-06-07T22:23:01.897 に答える
1

複数のセレクターを選択するには、これを試してください-

$("selector1,selector2")

それは間違いなく機能します。詳細については、 jQueryセレクターリファレンスをご覧ください。

于 2012-06-07T22:25:51.743 に答える