显示/隐藏多个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.