質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • jQuery

    8762questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQueryの絞り込み検索(3つの条件 or検索)について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 535

alpaca540

score 11

 前提・実現したいこと

画像を3つの条件(or検索)で表示したいと思っています。

2つの条件検索(#styleと#color)では問題なかったコードに、1つ条件(#size)を加えてみた所
まったく画像が検索(表示)されなくなってしまいました。

こちらのコードで間違っている点をお教え頂けませんでしょうか。
よろしくお願い致します。

※最初にすべての画像が表示されていて、条件をクリックするとその画像が表示される様にしたいと思っています。

 該当のソースコード

<form>
<div id="select" >
<!--all(ページリロード)ボタン-->
<input type="button"  value="ALL" onclick="allselect()">

<!--画像絞り込み 選択欄-->
<div id="style"><!--「style」と「color」と「size」はor検索-->
<label for="shirt"><input type="checkbox" id="shirt">シャツ</label>
<label for="skirt"><input type="checkbox" id="skirt">スカート</label>
<label for="another"><input type="checkbox" id="another">その他</label>
</div>
<div id="color">
<label for="white"><input type="checkbox" id="white">ホワイト</label>
<label for="pink"><input type="checkbox" id="pink">ピンク</label>
<label for="yellow"><input type="checkbox" id="yellow">イエロー</label>
</div>   
<div id="size">
<label for="l"><input type="checkbox" id="l">Lサイズ</label>
<label for="m"><input type="checkbox" id="m">Mサイズ</label>
</div>           
</div>
</form>

<!--画像絞り込み 結果表示-->
<div class="result">
<section class="skirt white m"><img src="image/sample.jpg" ></section>
<section class="shirt pink l"><img src="image/sample2.jpg" ></section><!--画像続く-->

 試したこと

$(function(){
 $('.result section').show();    

 $('#style,#color,#size').find('input').on('click',function(){ 
    $('.result section').hide(); 
    $('#style [type=checkbox]:checked').each(function(){ 
    var checkstyle=$(this).prop('id'); 
    $('#color [type=checkbox]:checked').each(function(){
    var checkcolor=$(this).prop('id');
    $('#size [type=checkbox]:checked').each(function(){
    var checksize=$(this).prop('id');
    $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor) && $(this).hasClass(checksize);}).fadeIn();

     });
     });

 if($('#style [type=checkbox]:checked').length==0){
    $('#color [type=checkbox]:checked').each(function(){
    var checkcolor=$(this).prop('id');
    $('#size [type=checkbox]:checked').each(function(){
    var checksize=$(this).prop('id');
    $('.result section').filter(function(){return $(this).hasClass(checkcolor) && $(this).hasClass(checksize);}).fadeIn();
     });
     });
    };

 if($('#color [type=checkbox]:checked').length==0){
    $('#style [type=checkbox]:checked').each(function(){
    var checkstyle=$(this).prop('id');
    $('#size [type=checkbox]:checked').each(function(){
    var checksize=$(this).prop('id');
    $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checksize);}).fadeIn();
     });
     });
    };

 if($('#size [type=checkbox]:checked').length==0){
    $('#style [type=checkbox]:checked').each(function(){
    var checkstyle=$(this).prop('id');
    $('#color [type=checkbox]:checked').each(function(){
    var checkcolor=$(this).prop('id');
    $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor);}).fadeIn();
     });
     });
    };

 if($('#select [type=checkbox]:checked').length==0){    
    $('.result section').fadeIn();    
    };
 })
});

function allselect() {
  $('.result section').fadeIn();
  $('#select input[type="checkbox"]').prop('checked', false);
};
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/03/26 14:08 編集

    CSSの冒頭に<がありますが、これは?またjavascriptの方も全角空白が混じっているようです。なるべく現在のコードをそのまま貼り付けてください。

    キャンセル

  • alpaca540

    2018/03/26 14:19

    ご指摘ありがとうございました。CSSは間違えていましたので、削除させていただきました。全角空白の件は、コード貼り直してみたのですが、そもそものコードに全角空白が入ってしまっているかもしれません。すみません。よろしくお願い致します。

    キャンセル

回答 2

checkベストアンサー

+2

絞り込みの仕様をきちんと提示して下さい

仮に、class="skirt white m"のsectionは

  • skirtかつwhiteかつmのand検索なのか
  • skirtまたはwhiteまたはmのor検索なのか

によって処理は違います。

仮に前者であれば全部未チェックの場合は全部非表示ですので後者ですか?
後者では絞り込みとしてはあまり意味がないようにみえます。
折衷案として、style,color,size、のどれかが設定されていたらそれを利用して
and検索をする(選ばれていない項目は全部がヒット)ということでしょうか?
またand検索の場合仮にcolorがwhiteとpinkの両方を選ぶと、whiteかつpinkは有りえないので
ヒットがなくなると思います。

よくよく仕様を検討しなおしてみてください

 sample

すべてor検索

$(function(){
  $('[type=checkbox]').on('change',function(){
    var classList=[];
    if($('#style,#color,#size').find('[type=checkbox]:checked').length==0){
      $('.result section').show();
    }else{
      $('#style,#color,#size').find('[type=checkbox]:checked').each(function(){
        classList.push("."+$(this).attr('id'));
      });
      $('.result').find('section').hide().end().find(classList.join(',')).show();
    }
  }).eq(0).trigger('change');
});
<form>
<div id="select" >
<input type="button"  value="ALL" onclick="allselect()">
<div id="style"><!--「style」と「color」と「size」はor検索-->
<label for="shirt"><input type="checkbox" id="shirt">シャツ</label>
<label for="skirt"><input type="checkbox" id="skirt">スカート</label>
<label for="another"><input type="checkbox" id="another">その他</label>
</div>
<div id="color">
<label for="white"><input type="checkbox" id="white">ホワイト</label>
<label for="pink"><input type="checkbox" id="pink">ピンク</label>
<label for="yellow"><input type="checkbox" id="yellow">イエロー</label>
</div>   
<div id="size">
<label for="l"><input type="checkbox" id="l">Lサイズ</label>
<label for="m"><input type="checkbox" id="m">Mサイズ</label>
</div>           
</div>
</form>

<div class="result">
<section class="shirt white l">シャツ 白 L</section>
<section class="skirt white m">スカート 白 M</section>
<section class="skirt pink l">スカート ピンク L</section>
</div>

 カテゴリごとにand検索、ただしカテゴリ内はor検索

$(function(){
  $('[type=checkbox]').on('change',function(){
    if($('#style,#color,#size').find('[type=checkbox]:checked').length==0){
      $('.result section').show();
    }else{
      var myList=[];
      ["style","color","size"].forEach(function(x){
        if($('#'+x+' [type=checkbox]:checked').length>0){
          myList.push($('#'+x+' [type=checkbox]:checked').map(function(){return '.'+$(this).attr('id');}).get()); 
        }
      });
      var classList=[];
      for(var i=0;i<myList.length;i++){
        if(classList.length==0) classList=myList[i];
        if(i>=myList.length-1) break;
        var tmp=[];
        for(var j=0;j<classList.length;j++){
          for(var k=0;k<myList[i+1].length;k++){
            tmp.push(classList[j]+myList[i+1][k]);
          }
        }
        classList=tmp;
      }
      $('.result section').hide().filter(classList.join(",")).show();
    }
  }).eq(0).trigger('change');
});
<form>
<div id="select" >
<input type="button"  value="ALL" onclick="allselect()">
<div id="style"><!--「style」と「color」と「size」はor検索-->
<label for="shirt"><input type="checkbox" id="shirt">シャツ</label>
<label for="skirt"><input type="checkbox" id="skirt">スカート</label>
<label for="another"><input type="checkbox" id="another">その他</label>
</div>
<div id="color">
<label for="white"><input type="checkbox" id="white">ホワイト</label>
<label for="pink"><input type="checkbox" id="pink">ピンク</label>
<label for="yellow"><input type="checkbox" id="yellow">イエロー</label>
</div>   
<div id="size">
<label for="l"><input type="checkbox" id="l">Lサイズ</label>
<label for="m"><input type="checkbox" id="m">Mサイズ</label>
</div>           
</div>
</form>

<div class="result">
<section class="shirt white l">シャツ 白 L</section>
<section class="skirt white m">スカート 白 M</section>
<section class="skirt pink l">スカート ピンク L</section>
</div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/26 17:47

    一応それっぽい処理を書いておきましたのでなにかの機会に確認してみて下さい

    キャンセル

  • 2018/03/26 17:56

    yambejp氏、図らずも再掲させていただき「大丈夫です」言っちゃってすみませんm(_ _)m
    いつもありがとうございます。

    キャンセル

  • 2018/03/26 18:08

    コード教えて下さってありがとうございます。
    できました!!!!
    この検索方法がずっとやりたかったのです。

    内容は、これからひとつひとつ勉強させていただきます。
    本当にありがとうございました。

    キャンセル

+2

どこかで見たことある質問だと思ったんですがやっと探せたので。
https://teratail.com/questions/85488

上のyambejp氏回答のコメントを見るにこれに近いかなと
思ったので出させていただきます。(リンク先の回答にもyambejp氏がいますので大丈夫です)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/26 16:33

    ご回答ありがとうございます。
    どちらかのコードを参考にさせて頂いたのですが、どこだったかわからなくなっていまして
    見つけて下さってありがとうございます!!また改めて確認することができました。
    こちらのコードは2つの条件で、3つの条件で検索する方法が知りたいと思って
    今回質問させていただきました。

    キャンセル

  • 2018/03/26 17:53

    sousukeさん、ありがとうございます
    歳のせいか全く覚えてません・・・トホホ

    キャンセル

  • 2018/03/27 14:56

    どんまいです…結構前の話なので仕方ないですよ!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • jQuery

    8762questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。