使用ul li的jQuery過濾器列表

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>

JS：

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