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 作为两个隐藏的 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>
4

3 回答 3

4

用 CSS 隐藏你的元素：

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

从两个 div 中删除重复的“self”id，并将“self”值添加到两个 div 的 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" );
});​​​​​​​​​​

这将所有 div 的可见性.self基于选择的值为“self”。如果选择“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/

于 2012-06-07T22:10:49.047 回答
1

您的 jQuery 选择器可以通过在选择器的引号内创建一个逗号分隔列表来与多个类（或任何其他元素）交互，换句话说：

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

编辑：请注意，在某些情况下区分大小写可能是一个问题，因此“.insertclass”并不总是与“.insertClass”相同 - 请参阅$(.someClass) 之类的 JQuery 类选择器区分大小写？更多。

看起来您最初可能因为没有将所有选择器都放在相同的引号中而被挂断了。在类之间有一个空格'.carlocation .insertclass'实际上是在说“选择一个具有类“insertclass”的元素，它是一个具有类“carlocation”的元素的子元素

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

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