基于div上的选择值和css类过滤列表答案

【问题标题】：Filtering list based on select value and css class on div基于div上的选择值和css类过滤列表
【发布时间】：2014-12-01 17:11:08
【问题描述】：

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

<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 语句中比较这两个值？

【问题讨论】：

你说它不工作，但你从来没有说过“如何”它失败了？您可能还想创建一个 jsFiddle 以允许潜在的响应者尝试测试。
我试过了：你的代码有效。你没有忘记添加 JQuery 吗？
This fiddle is 我如何看待您的代码，即使您的原始代码有效。
原始代码将显示所有 div 或隐藏所有 div。
@Kolban 可以使用提供的 HTML。像往常一样，我还没准备好猜测完整的相关 HTML 到底是什么样子。

标签： javascript jquery html css

【解决方案1】：

如果 Value 是 class ，那么您可以这样做：

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

【讨论】：

@Regent：是的。我忘记了。我的错！！我个人会在这里使用 id 并保留课程，这样会很容易
好吧，在这种情况下，您可以将代码更改为$('div').hide(); $('.' + selectedGroup).show(); 以保存您的答案。

【解决方案2】：

按照您的原始设计，以下代码片段将起作用：

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

【讨论】：

$('div').hide(); $('.' + selectedGroup).show(); 比 .each() 短得多 :)
是的......和三元运算符比 if then elses 更紧凑......但这里的想法是在最初的设计中遵循原始海报的想法，而不是一个全新的（和更好）算法。
我只是希望至少有一小部分提问者能够学习如何使用 jQuery 来修正更短、更好且通常更快的工作代码。为了帮助他们，我们可以提供他们代码的“更好”版本，不是吗？

【解决方案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>

【讨论】：