使用ul li的jQuery过滤器列表

Question

I've got a filter list working using the select dropdown. But because of the lack of styling options, I'd rather switch it to a ul instead. But I'm having trouble doing so.

Here's the jQuery I'm using

$("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();
});

I've tried changing select.filter to a regular div class but I can see it's mapping using the value function .val

Ideally, I'd like it to be:

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

But I can't use a value tag on a li . Did anyone get any suggestions on the best way to solve this?

Here's a working fiddle: http://jsfiddle.net/6PrQW/329/

Answer 1

There are many ways to do this. Personally, I like setting data attributes for HTML elements that have hidden values. using data-* attributes.

I updated your code to make it work with a 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 the JS:

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