jQuery filter list using ul li

Question

我有一个使用选择下拉列表工作的过滤器列表。但是由于缺乏样式选项，我宁愿将其切换到ul。但是我这样做很麻烦。

这是我正在使用的jQuery

$("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

映射

理想情况下，我希望它是：

<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>

an js：

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