Question

我已根据某些互联网资源创建了代码过滤器列表。使用3种呈现过滤器（组合，人物，主题），用户应该能够从任何列表中选择一个，并且在列表之后应该排除不具有所选标记的项目。

HTML

<h2>Composition</h2> 
<ul class="filter" id="composition">
    <li><a data-value="all">All</a> </li>
    <li><a data-value="landscape">Landscape</a></li> 
    <li><a data-value="portait">Portait</a> </li>
    <li><a data-value="square">Square</a> </li>
</ul>

<h2>People</h2>
<ul class="filter" id="people">
    <li><a data-value="all">All</a> </li>
    <li><a data-value="people">People</a></li> 
    <li><a data-value="nopeople">No People</a></li>
</ul>

<h2>Theme</h2>
<ul class="filter" id="theme">
    <li><a data-value="all">All</a> </li>
    <li><a data-value="Nature">Nature</a></li> 
    <li><a data-value="Fashion">Fashion</a></li> 
    <li><a data-value="Mountains">Mountains</a></li> 
    <li><a data-value="Sea">Sea</a></li>    
</ul>

<h2>Data to filter</h2>
<ul> 
    <li class="item landscape people Nature">landscape people Nature</li> 
    <li class="item portait nopeople Fashion">portait nopeople Fashion</li> 
    <li class="item landscape people Mountains">landscape people Mountains</li> 
    <li class="item portait people Sea">portait people Sea</li> 
    <li class="item square people Mountains">square people Mountains</li> 
    <li class="item landscape people Fashion">landscape people Fashion</li> 
    <li class="item square nopeople Sea">square nopeople Sea</li> 
    <li class="item landscape nopeople Mountains">landscape nopeople Mountains</li> 
    <li class="item portait people Fashion">portait people Fashion</li> 
    <li class="item square nopeople Sea">square nopeople Sea</li> 
</ul>

的JavaScript

$(document).ready(function() 
        { 
            $("ul.filter li a").click(function() 
            { 
                $(this).closest('ul').find('a').removeClass('selected');
                $(this).addClass('selected');
                var composition    = $('ul#composition li a.selected').data('value'); 
                var people    = $('ul#people li a.selected').data('value');
                var theme    = $('ul#theme li a.selected').data('value');
                var compositionSelector = ''; 
                var peopleSelector = '';  
                var themeSelector = '';        

                if (composition == "all" && people == "all" && theme == "all") 
                { 
                    //show all items 
                    $(".item").show(); 
                } 
                else 
                { 

                    if (theme != "all") 
                    { 
                        themeSelector = '.' + theme ;
                    } 

                    if (people != "all") 
                    { 
                        peopleSelector = '.' + people ;
                    } 

                    if (composition != "all") 
                    { 
                        compositionSelector = '.' + composition ;
                    } 


                    $(".item").hide(); 
                    $(compositionSelector + peopleSelector + themeSelector).show(); 
                } 

            }); 
        });

小提琴：https://jsfiddle.net/22vh08ah/

Answer 1

在此updated fiddle正常工作，jQuery未包含在内，而您的控制台警告为Uncaught ReferenceError: $ is not defined，原因是该库未包含在文档中。没有修改代码。您的实际项目是否包含jQuery？

修改现在您已经澄清了，请尝试检查this fiddle。问题是您的类名是未定义的，除非单击每个组中的列表项。为了解决这个问题，你需要编辑标记本身以获得第一个，或者＃34; all＆＃34;列表项默认设置为选中。这将阻止每次运行某些if statements，并将选择器设置为未定义。

Answer 2

你可以试试这个：

$("ul.filter li a")
    .on('click', function() { 
        var $this = $(this);
        $this
            .closest('ul')
            .find('a')
            .removeClass('selected');
        $this
            .addClass('selected');
        var selector = [];
        $('ul li a.selected')
            .each(function() {
                var selectedValue = $(this).data('value');
                if (selectedValue !== 'all') {
                    selector.push(selectedValue);
                }
            });
        $(".item")
            .hide();
        $('.item'+ (selector.length ? '.' : '') + selector.join('.'))
            .show();
    });

这是FIDDLE。

标记过滤列表

2 个答案: