標記篩選器列表

Question

我已經創建了基於某些Internet源的標記篩選器列表。有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 ，cau由圖書館sed沒有包含在文件中。沒有代碼被修改。您的實際活動項目是否包含jQuery？

編輯： 現在你已經澄清，請嘗試檢查this fiddle。問題是你的類名是未定義的，除非每個組中的列表項被點擊。爲了解決這個問題，您需要編輯標記本身以將第一個或「全部」列表項設置爲默認選擇。這會阻止每次運行某個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。