jquery - jQuery 两个选择菜单按类显示/隐藏列表项

Question

我最近的问题：jQuery 选择菜单显示具有相同 ID 的兄弟姐妹隐藏其他兄弟姐妹

允许我使用选择菜单选项值显示/隐藏列表项：http: //jsfiddle.net/Z3Qgz/

如果我添加第二个选择菜单，如何将两个选择菜单链接在一起，以便显示的列表项代表两个菜单中选择的值？

$(function() {
    var $li = $('.levelThree').find('li')
    $("#orientation").change(function() {
        if (this.value == 'all') {
            $li.show();
        }
        else {
            $li.hide().filter("." + this.value).show();
        }
    }).change();
});
$(function() {
    var $li = $('.levelThree').find('li')
    $("#colours").change(function() {
        if (this.value == 'all') {
            $li.show();
        }
        else {
            $li.hide().filter("." + this.value).show();
        }
    }).change();
});

http://jsfiddle.net/dRqRV/2/

例如，选择“Landscape”和“CMYK”将只显示具有“Landscape CMYK”类的列表项。

Answer 1

您可以向元素添加 2 个其他类并使用类选择器，这样就不需要使用 if/else 语句。

<select id="orientation">
    <option value="all-orientations">All</option>
    ...
</select>
<select id="colours">
    <option value="all-colours">All</option>
    <option value="CMYK">CMYK</option>
    ...
</select>

<!-- the DIVs -->
<ul class="levelThree">
    <li class="Landscape CMYK all-colours all-orientations"><p>Landscape CMYK</p></li>
    <li class="Landscape RGB all-colours all-orientations"><p>Landscape RGB</p></li>
    <li class="Landscape PMS all-colours all-orientations"><p>Landscape PMS</p></li>
    ...
</ul>

$(function() {
    var $li = $('.levelThree').find('li')
    $("#orientation, #colours").change(function() {
        var a = $("#orientation").val();
        var b = $("#colours").val();
        $li.hide().filter("." + a + "." + b).show();
    }).change();
});

http://jsfiddle.net/3jRQq/