使用 ul li 的 jQuery 过滤列表答案

【问题标题】：jQuery filter list using ul li使用 ul li 的 jQuery 过滤列表
【发布时间】：2017-09-02 02:27:04
【问题描述】：

我有一个使用选择下拉菜单的过滤器列表。但由于缺少样式选项，我宁愿将其切换为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/

【问题讨论】：

标签： jquery drop-down-menu filter filtering

【解决方案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();
});

【讨论】：