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开始，但在第一次下拉时选择“Self parking”，其他两个选项显示。

<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”值添加到两者的class属性中：

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

旁注：你的第二个div错过了结束标记。

然后绑定到表单的change事件：

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

这使得所有.self div的可见性基于select为“self”的值。如果选择“自我”，则所有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“类的元素的子

如果您要多次与同一组元素进行交互，可以通过将代码分配给变量来优化代码：

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

（请注意，将'$'放在变量名中只会提醒您它是一个jQuery对象，您可以根据需要命名它。）

您现在可以在$ myselection上使用任何常规jQuery方法：

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

或稍后使用（只要变量可以在您正在寻找的范围内访问，这在您的初始示例中不会出现问题。）

Answer 3

要选择多个选择器，请尝试此操作 -

$("selector1,selector2")

一定会奏效。有关更多信息，请访问jQuery selectors reference.

显示/隐藏多个Div

3 个答案: