使用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(); 
});