jQueryでフィルタリング – JavaScript Archives（ジャバスクリプト アーカイブス）
jQueryでできるフィルタリングのご紹介です。 以下がコードサンプルになります。 ▼JavaScript $("button").click(function () { var image = $(this).attr("value"); $("#list li").each(function () { $(this).animate({ "opacity": 0 }, 300, function () { $(this).hide(); if ($(this).hasClass(image) || image == "all") { $(this).show(); $(this).animate({ "opacity": 1 }, 300); } }); }); }); }); ▼CSS button{ font-size:90%; margin-right:10px; display
データをclassとjqueryで判定してカテゴリごとに絞り込みます。 - CodingMania
たくさんのデータをカテゴリで絞り込み、表示・非表示します。 htmlソースは長いですが、表示要素を繰り返しているだけなので、メニューと要素部分の単純構造です。 デモページへopen_in_new JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="tool.js"></script> [tool.js]JavaScript //check panel jQuery(document).ready(function($){ $(function(){ var btn =$(".mod_menu ul li a"); btn.click
要素をアニメーションで絞り込みや並び替えさせるjQueryプラグイン Shuffle.js | N-LOG
Demoを見る HTML <ul id="btn"> <li data-group="all" class="active alpha">ALL</li> <li data-group="red" class="alpha">RED</li> <li data-group="blue" class="alpha">BLUE</li> <li data-group="green" class="alpha">GREEN</li> <li data-group="yellow" class="alpha">YELLOW</li> </ul> <ul id="animationList"> <li data-groups='["red"]'><span class="red">RED</span></li> <li data-groups='["yellow"]'><span class="ye
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
