使用ul li的jQuery過濾器列表

Question

我有一個使用select下拉菜單工作的過濾器列表。但由於缺少造型選項，我寧願將它切換到ul。但是我很難這樣做。

下面是我使用

$("select.filterby").change(function(){ 
    var filters = $.map($("select.filterby").toArray(), function(e){ 
     return $(e).val(); 
    }).join("."); 
    $("div#FilterContainer").find("div").hide(); 
    $("div#FilterContainer").find("div." + filters).show(); 
}); 

我試圖改變select.filter到正規的div類，但使用值函數.val

理想的情況下，我可以看到它的映射我了jQuery喜歡它d是：

<ul class="filterby"> 
    <li class="all">Show All</li> 
    <li class="one">One</li> 
    <li class="two">Two</li> 
    <li class="three">Three</li> 
</ul> 

但我不能在li使用值標籤。有沒有人獲得解決此問題的最佳方法的任何建議？

這裏的工作小提琴：http://jsfiddle.net/6PrQW/329/

Answer 1

有很多方法可以做到這一點。就我個人而言，我喜歡爲具有隱藏值的HTML元素設置數據屬性。使用data-*屬性。

我更新了您的代碼，使其與UL一起工作。 http://jsfiddle.net/47703Lcd/3/

<ul class="filterby"> 
    <li data-filter="all" class="all">Show All</li> 
    <li data-filter="1"class="one">One</li> 
    <li data-filter="2"class="two">Two</li> 
    <li data-filter="3" class="three">Three</li> 
</ul> 

一種的JS：

$("ul.filterby li").click(function(){ 
    var filters = $(this).data("filter"); 
    $("div#FilterContainer").find("div").hide(); 
    $("div#FilterContainer").find("div." + filters).show(); 
});