ul liを使用したjQueryフィルタリスト

Question

selectドロップダウンリストを使用してフィルタリストを作成しました。しかし、スタイリングオプションがないため、代わりにulに切り替えることにしました。しかし、私はそうすることに問題があります。

は、ここで私は、私は通常のdivのクラスにselect.filterを変更しようとしましたが、私はそれが理想的価値機能.val

を使用してマッピングだ見ることができ、私は」

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

を使用しているjQueryのそれがために好きdは：

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