jQuery隐藏了所有的<li>标记

Question

jQuery遇到了一些问题，因为我对它还很陌生，我有一些jQuery代码，它隐藏了<li>项的筛选菜单。然而，当我使用它时，它也隐藏了我在主菜单标题中使用的<li>标记。

我想为<li>指定一个特定的类名以隐藏，但是他们已经在使用特定的名称了。(例如会计、信使等)

如何仅隐藏特定的<li>标记，而不隐藏主菜单标题中的标记？我能给我要隐藏的<li>分配一个不同的标识符吗？

用于隐藏li的HTML代码：

<div class="tags">
<div id="col">
    <label>
        <input type="checkbox" rel="accounting" />Accounting</label>
</div>
<div id="col">
    <label>
        <input type="checkbox" rel="courier" />Courier</label>
</div>
<div id="col">
    <label>
        <input type="checkbox" rel="project-management" />Project Management</label>
</div>
<div id="col">
    <label>
        <input type="checkbox" rel="video-games" />Video Games</label>
</div>
</div>

<ul class="results">
<li class="accounting" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Accounting</a>

</li>
<li class="courier" style="list-style-type:none"><a href="{{ path('job1') }}" style="text-decoration: none">Courier / Parcel Delivery</a>

</li>
<li class="project-management" style="list-style-type:none"><a href="{{ path('job3') }}" style="text-decoration: none">Game QA Project Management</a>

</li>
<li class="video-games" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Video Games</a>

</li>
</ul>

jQuery代码(隐藏所有li标记)

<script>
    $('div.tags').find('input:checkbox').on('click', function () {
        var vals = $('input:checkbox:checked').map(function () {
            return $(this).attr('rel');
        }).get();
        $('li').hide().filter(function () {
            return ($.inArray($(this).attr('class'), vals) > -1)
        }).show()
        if ($('input:checkbox:checked').length == 0) $('li').show()
    });
</script>

Answer 1

尝试改进选择器，使其更具体，如下所示：

<script>
    $('div.tags').find('input:checkbox').on('click', function () {
        var vals = $('input:checkbox:checked').map(function () {
            return $(this).attr('rel');
        }).get();
        $('.results li').hide().filter(function () {
            return ($.inArray($(this).attr('class'), vals) > -1)
        }).show()
        if ($('input:checkbox:checked').length == 0) $('.results li').show()
    });
</script>

从$('li')到$('.results li')的更改将导致它只选择带有results类的ul中的list元素。

Answer 2

您只需将jquery选择器li替换为container-class li，如下所示

.results li

现场演示