急いでいます！

jQueryで、複数条件の絞り込み機能

解決済

質問者：momo_monom
質問日時：2016/07/13 21:50
回答数：1件

jQueryを使って、複数条件の絞り込み機能を作っています。
試行錯誤の末（かなり素人的な考え方ですが）１条件ずつの絞り込みは、以下の仕組みで実装できました。しかし、複数選択の絞り込みの仕組みが難しく、壁にぶつかっております。どのようにするとよいのでしょうか？ご教授おねがいいたします。

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2016/07/14 11:23

こんにちは

ご提示の雰囲気だと、「絞り込み」というよりも「and検索」として考えれば、1条件とか絞り込みとか考えずに全部同じ処理でできそうに思いますが、私が勘違いしてるのかしら・・・

クラスを利用して選別なさろうとしていると思いますが、allがsizeなのかfruitsなのか判然としないので混乱の元になりそうな気がします。
また、直接は関係ありませんが、$('.all').hide();としているので、サイズ指定用の表示の「全て」の文字まで消えてしまいますね。

条件指定がリストのクリックとセレクトでの選択という異なる方法を使っているところも謎です。
想像するところ、それぞれの指定（選択）条件は、他方を変えた時も生きているものとして考えて良いのですよね？
セレクト要素のほうは選択した内容が表示されるのでよいのですが、サイズの方は何を指定（クリック）したか覚えておかないと、わからなくなってしまうように思えます。

できるだけ、HTMＬはそのままにすることにして・・・
　・データ部分を明示化するために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>