Question

我正在制作一个列表，我需要根据在下拉列表中选择的值过滤列表。所有类和选择选项值都是动态的。但总是一样的。像这样：

<select id="picker" onchange="changeList()">
    <option value="0">Pick a side</option>
    <option value="The-good">The good</option>
    <option value="The-bad">The bad</option>
    <option value="The-ugly">The ugly</option>
</select>

<div class="The-good">
    <span>Superman</span>
</div>

我正在使用jQuery来执行此操作。到目前为止，我的JS看起来像这样：

function changeList() {
    var selectedGroup = $("#picker").val();
    if ($("div").hasClass(selectedGroup)) {
        $("div").show();
    }
    else {
        $("div").hide();
    }
}

但那不起作用。有没有办法从div中选择类并将其放入var中，然后比较if语句中的两个值？

Answer 1

如果Value是class，那么您只需执行此操作：

function changeList() {
                var selectedGroup = $("#picker").val();
                $('.' + selectedGroup).toggle();  
            }

Answer 2

在原始设计中，以下代码片段将起作用：

function changeList() {
    var selectedGroup = $("#picker").val();
    $("div").each(function(i, item) {
         if ($(item).hasClass(selectedGroup)) {
             $(item).show();
         } else {
             $(item).hide();
         }
    });
}

Answer 3

试试这个。

function changeList() {
        $('.children').hide();
        $('.' + ($('#picker').val())).show();
    }


<select id="picker" onchange="changeList()">
    <option value="0">Pick a side</option>
    <option value="The-good">The good</option>
    <option value="The-bad">The bad</option>
    <option value="The-ugly">The ugly</option>
</select>

<div class="children The-good" style="display:none">
    <hr />
    <span>Superman</span>
</div>

<div class="children The-bad" style="display:none">
    <hr />
    <span>Badman</span>
</div>

<div class="children The-ugly" style="display:none">
    <hr />
    <span>Uglyman</span>
</div>

根据div上的select值和css类过滤列表

3 个答案: