jQuery Filterliste mit ul li

Question

Ich habe eine Filterliste funktioniert mit der Auswahl Drop-down. Aber wegen des Mangels an Styling-Optionen, würde ich lieber auf eine ul stattdessen wechseln. Aber ich habe Probleme damit.

Hier ist die jQuery Ich verwende

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

Ich habe versucht, select.filter zu einem regelmäßigen div class ändern, aber ich kann es Mapping sehen mit der Wertfunktion .val

Idealerweise ich d wie es sein:

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

Aber ich kann keinen Wert-Tag auf einem li verwenden. Hat jemand irgendwelche Vorschläge bekommen, wie man das am besten lösen kann?

Hier ist eine Arbeits Geige: http://jsfiddle.net/6PrQW/329/

Answer 1

Es gibt viele Möglichkeiten, dies zu tun. Persönlich setze ich gerne Datenattribute für HTML-Elemente mit versteckten Werten. Verwenden data-* Attribute.

Ich habe Ihren Code aktualisiert, damit er mit einem UL funktioniert. 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 der JS:

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