如何根据下拉值切换多个元素的可见性

How to toggle the visibility of multiple elements based of dropdown value

本文关键字：元素 可见性 何根      更新时间：2023-09-26

我有以下HTML元素：

#categoryid is a dropdown/select
#addFoo is a button
#removeFoo is button
#Foo is a div
#Bar is a div

我使用以下脚本根据下拉列表中选择的内容更改这些元素的可见性：

$('#categoryid').change(function () {
    var category = $(this).val();
    if (category === 'Foo') {
        $('#addFoo').removeClass('invisible');
        $('#removeFoo').removeClass('invisible');
        $('#Foo').removeClass('invisible');
    }
    else if (category === 'Bar') {
        $('#Bar').removeClass('invisible');
    }
    if (category !== 'Foo') {
        $('#addFoo').addClass('invisible');
        $('#removeFoo').addClass('invisible');
        $('#Foo').addClass('invisible');
    }
    if (category !== 'Bar') {
        $('#Bar').addClass('invisible');
    }
});

.CSS

.invisible {
   display:none;
}

有没有更好的方法？

您可以为这些Foo元素提供一个通用类名foo(或 data- 属性，无论您喜欢哪个(：

$('#categoryid').change(function () {
    if (this.value === 'Foo') {
        $('.foo').removeClass('invisible');
        $('#Bar').addClass('invisible');
    } else if (this.value === 'Bar') {
        $('#Bar').removeClass('invisible');
        $('.foo').addClass('invisible');
    }
}).trigger("change"); // for demo purpose
.invisible {
    display:none;
}
div { /*for demo purpose*/
    height:50px;
    line-height:50px;
    text-align:center;
    color:#fff;
    background:dodgerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="categoryid">
    <option value="Foo">Foo</option>
    <option value="Bar">Bar</option>
</select>
<div id="Foo" class="foo">Foo!</div>
<div id="Bar">Bar!</div>
<button id="addFoo" class="foo">add Foo!</button>
<button id="removeFoo" class="foo">remove Foo!</button>

或者，如果您必须使用这些id，则可以使用属性包含选择器，例如：

$('#categoryid').change(function () {
    if (this.value === 'Foo') {
        $('[id*="Foo"]').removeClass('invisible');
        $('#Bar').addClass('invisible');
    } else if (this.value === 'Bar') {
        $('#Bar').removeClass('invisible');
        $('[id*="Foo"]').addClass('invisible');
    }
}).trigger("change"); // for demo purpose
.invisible {
    display:none;
}
div { /*for demo purpose*/
    height:50px;
    line-height:50px;
    text-align:center;
    color:#fff;
    background:dodgerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="categoryid">
    <option value="Foo">Foo</option>
    <option value="Bar">Bar</option>
</select>
<div id="Foo"></div>
<div id="Bar"></div>
<button id="addFoo">add Foo!</button>
<button id="removeFoo">remove Foo!</button>

更新

更好的是，正如 A. Wolff 在注释中提到的，您可以传递一个返回 true/false 的条件，该条件分别决定是添加还是删除类，作为toggleClass()方法的第二个参数。

$('#categoryid').change(function () {
   $('.foo').toggleClass('invisible', this.value !== 'Foo');
   $('#Bar').toggleClass('invisible', this.value !== 'Bar');
}).trigger("change"); // for demo purpose
.invisible {
    display:none;
}
div { /* for demo purpose */
    height:50px;
    line-height:50px;
    text-align:center;
    color:#fff;
    background:dodgerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="categoryid">
    <option value="Foo">Foo</option>
    <option value="Bar">Bar</option>
</select>
<div id="Foo" class="foo">Foo!</div>
<div id="Bar">Bar!</div>
<button id="addFoo" class="foo">add Foo!</button>
<button id="removeFoo" class="foo">remove Foo!</button>

旁注：正如其他人建议的那样，您可以使用show()和hide()方法，但我假设您使用 css 类是有原因的 - 就像注入的内联样式比其他类定义具有更高的特异性......

当然！使用 jquery .hide(( 和 .show(( 或 .toggle((

你可以直接使用jQuery中存在的show()、hide()、slideUp()、slideDown()方法：

$('#divid').show();
相关文章：