jQueryを使って、複数条件の絞り込み機能を作っています。
試行錯誤の末( かなり素人的な考え方ですが )1条件ずつの絞り込みは、以下の仕組みで実装できました。しかし、複数選択の絞り込みの仕組みが難しく、壁にぶつかっております。どのようにするとよいのでしょうか?ご教授おねがいいたします。
<script>
$(function() {
// サイズの絞り込み
$('.all').click(function(){ $('.all').hide(); $('.all').fadeIn(); });
$('.large').click(function(){ $('.all').hide(); $('.large').fadeIn(); });
$('.medium').click(function(){ $('.all').hide(); $('.medium').fadeIn(); });
$('.small').click(function(){ $('.all').hide(); $('.small').fadeIn(); });
// 種類の絞り込み
$('#fruits').change(function(){ $('.all').hide(); $($(this).val()).fadeIn(); });
});
</script>
<ul id="size">
<li><a class="all">全て</a></li>
<li><a class="large">大</a></li>
<li><a class="small">小</a></li>
</ul>
<select id="fruits">
<option value=".all">全て</option>
<option value=".ringo">りんご</option>
<option value=".banana">バナナ</option>
</select>
<div class="ringo large all">りんご(大)</div>
<div class="ringo small all">りんご(小)</div>
<div class="banana large all">バナナ(大)</div>
<div class="banana small all">バナナ(小)</div>
No.1ベストアンサー
- 回答日時:
こんにちは
ご提示の雰囲気だと、「絞り込み」というよりも「and検索」として考えれば、1条件とか絞り込みとか考えずに全部同じ処理でできそうに思いますが、私が勘違いしてるのかしら・・・
クラスを利用して選別なさろうとしていると思いますが、allがsizeなのかfruitsなのか判然としないので混乱の元になりそうな気がします。
また、直接は関係ありませんが、$('.all').hide();としているので、サイズ指定用の表示の「全て」の文字まで消えてしまいますね。
条件指定がリストのクリックとセレクトでの選択という異なる方法を使っているところも謎です。
想像するところ、それぞれの指定(選択)条件は、他方を変えた時も生きているものとして考えて良いのですよね?
セレクト要素のほうは選択した内容が表示されるのでよいのですが、サイズの方は何を指定(クリック)したか覚えておかないと、わからなくなってしまうように思えます。
できるだけ、HTMLはそのままにすることにして・・・
・データ部分を明示化するためにdiv id="data"を包含要素として追加
・サイズで選択中のものがわかるようにclass="selected"を付与
(仮に、CSSで選択中の項目は色が変わるようにしてあります)
の部分を変えています。
スクリプトでの処理方法はいろいろな考え方があると思いますので、あくまでも一例です。
and検索的な考え方で毎回全体から検索しなおすような考え方をしています。
条件が2個なので直接記述していますが、もっとたくさんならループで処理したほうが良いかも。
(とは言っても、この方式で条件を増やすとclassの記述が大変そうですが・・・)
(以下、インデントを全角空白にしてありますので、半角に)
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#size .selected { color: #B00; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
<script type="text/javascript">
$(function() {
var data = $("#data > div");
var cnds = { size:"all", fruits:"all" };
// イベント処理を設定
$("#size a").on("click", function(){
$(this).parent("li").addClass("selected").siblings().removeClass("selected");
search({ size: $(this).attr("class")});
});
$("#fruits").on("change", function(){ search({ fruits: this.value}); });
// 指定条件に合うものを表示
function search(c){
$.extend(cnds, c);
data.hide().filter("." + cnds.size).filter("." + cnds.fruits).fadeIn();
}
});
</script>
</head>
<body>
<ul id="size">
<li class="selected"><a class="all">全て</a></li>
<li><a class="large">大</a></li>
<li><a class="small">小</a></li>
</ul>
<select id="fruits">
<option value=".all">全て</option>
<option value=".ringo">りんご</option>
<option value=".banana">バナナ</option>
</select>
<div id="data">
<div class="ringo large all">りんご(大)</div>
<div class="ringo small all">りんご(小)</div>
<div class="banana large all">バナナ(大)</div>
<div class="banana small all">バナナ(小)</div>
</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バッチファイル 特定ウインドウ...
-
PDFを(htmlのように)無限に縦...
-
GASでスプレッドシートの一番上...
-
入力フォームの値をQRコードで...
-
VBA ディレクトリ名をワイルド...
-
生コンの立米数の出し方
-
b75h2-m2 biosアップデートした...
-
VBAでクイズゲームの作り方
-
以下のURL入れますか?皆さんは↓
-
画像のドットの部分が抜けてい...
-
Chinapost こよパズルどう動か...
-
非同期通信で掲示板を作る際の...
-
非同期通信を使うタイミングが...
-
PYTHONのtkinterについて
-
Pythonのtkinterについて
-
Pythonを勉強する道のり
-
Pythonを無料(安価)で学ぶ方...
-
RPA(PowerAutomate)の実装について
-
ワードでA3横の画面にして、文...
-
課題なのですがどなたかコード...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
要素内を常に一番下を表示させたい
-
ローカルでのonreadystatechang...
-
AJAXでのリロードに関して
-
jQuery 並列load処理
-
jqueryでリンクを無効にしたあ...
-
【javascript文法】 prototype...
-
jqueryを使って非同期通信で10...
-
JQueryでAjax通信をキャンセル...
-
jQueryで、複数条件の絞り込み機能
-
jqueryのgetでJSPを呼び出したい
-
jqueryについて
-
ある条件の画像のみ表示を切り...
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
二つのbxsliderをレスポンシブ...
-
readyStateが4にならない原因
-
階層別の組織図の自動作成について
-
[jQuery UI] sortableを使いaja...
-
JavascriptからPHPへのAjax通信...
-
AjaxでJSONを受信すると、文字...
おすすめ情報