javascript - 显示/隐藏多个 Div

Question

将另一个类添加到此脚本的最佳方法是什么:

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

我可以使用相同的 ID 显示此类，我只是不确定如何向此脚本添加另一个类。作为 '.carlocation' 、 '.insertclass' 或 '.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 中删除重复的“self”id，并将“self”值添加到两者的类属性中:

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

旁注:您的第二个 div 缺少结束标记。

然后绑定(bind)到表单的更改事件:

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

这基于所有 .self div 的可见性基于选择的值为“self”。如果选择“self”，则所有 div.self 项都将变为可见。否则，它们会隐藏起来。

fiddle :http://jsfiddle.net/jonathansampson/5KJV5/

或者您可以将它们滑入 View :

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

fiddle :http://jsfiddle.net/jonathansampson/5KJV5/2/