顯示/隱藏多個div的

Question

什麼是另一個類添加到這個腳本的最佳方式：

<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開始爲兩個隱藏的div，但在第一個下拉選擇「自我停車」時，其他兩個選擇顯示。

<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> 

Answer 1

隱藏你用CSS元素：

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

從兩個的div刪除重複的「自我」的ID，取而代之的是「自我」值添加到雙方的類屬性：

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

邊注：你的第二個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/

Answer 2

你的jQuery選擇可以與多個類別（或任何其他元素）通過製作互動換句話說：

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

編輯：請注意，在某些情況下區分大小寫可能是個問題，因此'.insertclass'並不總是與'.insertClass'相同 - 有關更多信息，請參閱JQuery class selectors like $(.someClass) are case sensitive?。

它看起來像你可能已經掛起了最初沒有所有的選擇器在同一個引號。有類之間的空間爲'.carlocation .insertclass'其實是說：「選擇與類元素‘insertclass’，也就是用類元素的孩子‘carlocation’

如果你要與同一組進行交互元素超過一次，你可以通過它們assinging給一個變量優化代碼：

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

（注意，讓變量名的「$」只是幫助提醒你，這是一個jQuery對象，你可以將其命名它任何你想要的）。

現在你可以使用任何對$ myselection正常jQuery方法：

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

或使用更高版本（只要變量是你正在尋找它的範圍，這止跌內訪問在你最初的例子中，這不成問題）。

Answer 3

要選擇多個選擇嘗試這個 -

$("selector1,selector2") 

它將definetly工作。 欲瞭解更多信息，請訪問jQuery selectors reference.