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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

Q&A

解決済

2回答

1882閲覧

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

alpaca540

総合スコア18

jQuery

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

0グッド

0クリップ

投稿2018/03/26 04:38

編集2018/03/26 05:17

前提・実現したいこと

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

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

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

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

該当のソースコード

html

1<form> 2<div id="select" > 3<!--all(ページリロード)ボタン--> 4<input type="button" value="ALL" onclick="allselect()"> 5 6<!--画像絞り込み 選択欄--> 7<div id="style"><!--「style」と「color」と「size」はor検索--> 8<label for="shirt"><input type="checkbox" id="shirt">シャツ</label> 9<label for="skirt"><input type="checkbox" id="skirt">スカート</label> 10<label for="another"><input type="checkbox" id="another">その他</label> 11</div> 12<div id="color"> 13<label for="white"><input type="checkbox" id="white">ホワイト</label> 14<label for="pink"><input type="checkbox" id="pink">ピンク</label> 15<label for="yellow"><input type="checkbox" id="yellow">イエロー</label> 16</div> 17<div id="size"> 18<label for="l"><input type="checkbox" id="l">Lサイズ</label> 19<label for="m"><input type="checkbox" id="m">Mサイズ</label> 20</div> 21</div> 22</form> 23 24<!--画像絞り込み 結果表示--> 25<div class="result"> 26<section class="skirt white m"><img src="image/sample.jpg" ></section> 27<section class="shirt pink l"><img src="image/sample2.jpg" ></section> 28<!--画像続く-->

試したこと

javascript

1$(function(){ 2 $('.result section').show(); 3 4 $('#style,#color,#size').find('input').on('click',function(){ 5 $('.result section').hide(); 6 $('#style [type=checkbox]:checked').each(function(){ 7 var checkstyle=$(this).prop('id'); 8 $('#color [type=checkbox]:checked').each(function(){ 9 var checkcolor=$(this).prop('id'); 10 $('#size [type=checkbox]:checked').each(function(){ 11 var checksize=$(this).prop('id'); 12 $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor) && $(this).hasClass(checksize);}).fadeIn(); 13 14 }); 15 }); 16 17 if($('#style [type=checkbox]:checked').length==0){ 18 $('#color [type=checkbox]:checked').each(function(){ 19 var checkcolor=$(this).prop('id'); 20 $('#size [type=checkbox]:checked').each(function(){ 21 var checksize=$(this).prop('id'); 22 $('.result section').filter(function(){return $(this).hasClass(checkcolor) && $(this).hasClass(checksize);}).fadeIn(); 23 }); 24 }); 25 }; 26 27 if($('#color [type=checkbox]:checked').length==0){ 28 $('#style [type=checkbox]:checked').each(function(){ 29 var checkstyle=$(this).prop('id'); 30 $('#size [type=checkbox]:checked').each(function(){ 31 var checksize=$(this).prop('id'); 32 $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checksize);}).fadeIn(); 33 }); 34 }); 35 }; 36 37 if($('#size [type=checkbox]:checked').length==0){ 38 $('#style [type=checkbox]:checked').each(function(){ 39 var checkstyle=$(this).prop('id'); 40 $('#color [type=checkbox]:checked').each(function(){ 41 var checkcolor=$(this).prop('id'); 42 $('.result section').filter(function(){return $(this).hasClass(checkstyle) && $(this).hasClass(checkcolor);}).fadeIn(); 43 }); 44 }); 45 }; 46 47 if($('#select [type=checkbox]:checked').length==0){ 48 $('.result section').fadeIn(); 49 }; 50 }) 51}); 52 53function allselect() { 54 $('.result section').fadeIn(); 55 $('#select input[type="checkbox"]').prop('checked', false); 56};

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/03/26 05:09 編集

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

2018/03/26 05:19

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

回答2

0

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

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

投稿2018/03/26 07:07

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

alpaca540

2018/03/26 07:33

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

2018/03/26 08:53

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

2018/03/27 05:56

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

0

ベストアンサー

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

仮に、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検索

javascript

1$(function(){ 2 $('[type=checkbox]').on('change',function(){ 3 var classList=[]; 4 if($('#style,#color,#size').find('[type=checkbox]:checked').length==0){ 5 $('.result section').show(); 6 }else{ 7 $('#style,#color,#size').find('[type=checkbox]:checked').each(function(){ 8 classList.push("."+$(this).attr('id')); 9 }); 10 $('.result').find('section').hide().end().find(classList.join(',')).show(); 11 } 12 }).eq(0).trigger('change'); 13});

HTML

1<form> 2<div id="select" > 3<input type="button" value="ALL" onclick="allselect()"> 4<div id="style"><!--「style」と「color」と「size」はor検索--> 5<label for="shirt"><input type="checkbox" id="shirt">シャツ</label> 6<label for="skirt"><input type="checkbox" id="skirt">スカート</label> 7<label for="another"><input type="checkbox" id="another">その他</label> 8</div> 9<div id="color"> 10<label for="white"><input type="checkbox" id="white">ホワイト</label> 11<label for="pink"><input type="checkbox" id="pink">ピンク</label> 12<label for="yellow"><input type="checkbox" id="yellow">イエロー</label> 13</div> 14<div id="size"> 15<label for="l"><input type="checkbox" id="l">Lサイズ</label> 16<label for="m"><input type="checkbox" id="m">Mサイズ</label> 17</div> 18</div> 19</form> 20 21<div class="result"> 22<section class="shirt white l">シャツ 白 L</section> 23<section class="skirt white m">スカート 白 M</section> 24<section class="skirt pink l">スカート ピンク L</section> 25</div>

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

javascript

1$(function(){ 2 $('[type=checkbox]').on('change',function(){ 3 if($('#style,#color,#size').find('[type=checkbox]:checked').length==0){ 4 $('.result section').show(); 5 }else{ 6 var myList=[]; 7 ["style","color","size"].forEach(function(x){ 8 if($('#'+x+' [type=checkbox]:checked').length>0){ 9 myList.push($('#'+x+' [type=checkbox]:checked').map(function(){return '.'+$(this).attr('id');}).get()); 10 } 11 }); 12 var classList=[]; 13 for(var i=0;i<myList.length;i++){ 14 if(classList.length==0) classList=myList[i]; 15 if(i>=myList.length-1) break; 16 var tmp=[]; 17 for(var j=0;j<classList.length;j++){ 18 for(var k=0;k<myList[i+1].length;k++){ 19 tmp.push(classList[j]+myList[i+1][k]); 20 } 21 } 22 classList=tmp; 23 } 24 $('.result section').hide().filter(classList.join(",")).show(); 25 } 26 }).eq(0).trigger('change'); 27});

HTML

1<form> 2<div id="select" > 3<input type="button" value="ALL" onclick="allselect()"> 4<div id="style"><!--「style」と「color」と「size」はor検索--> 5<label for="shirt"><input type="checkbox" id="shirt">シャツ</label> 6<label for="skirt"><input type="checkbox" id="skirt">スカート</label> 7<label for="another"><input type="checkbox" id="another">その他</label> 8</div> 9<div id="color"> 10<label for="white"><input type="checkbox" id="white">ホワイト</label> 11<label for="pink"><input type="checkbox" id="pink">ピンク</label> 12<label for="yellow"><input type="checkbox" id="yellow">イエロー</label> 13</div> 14<div id="size"> 15<label for="l"><input type="checkbox" id="l">Lサイズ</label> 16<label for="m"><input type="checkbox" id="m">Mサイズ</label> 17</div> 18</div> 19</form> 20 21<div class="result"> 22<section class="shirt white l">シャツ 白 L</section> 23<section class="skirt white m">スカート 白 M</section> 24<section class="skirt pink l">スカート ピンク L</section> 25</div>

投稿2018/03/26 05:16

編集2018/03/26 08:46
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

alpaca540

2018/03/26 05:28

ご回答ありがとうございます。 わかりづらい書き方で申し訳ありません。 skirt(style)またはwhite(color)またはm(size)のor検索を希望しています。 また、whiteとpinkのストライプというアイテムが存在するという意味で、whiteかつpinkがあり得る状態となっています。
yambejp

2018/03/26 05:42

了解です。 すべてor検索ならやりようがあるので追記します > whiteとpinkのストライプというアイテム これはwhiteかpinkではなくwhitepinkなどの方がよいかもしれません
alpaca540

2018/03/26 06:18

コードを教えて下さいましてありがとうございます!! そして、本当に本当に申し訳ございません。 希望していたのは、 skirt(style)かつwhite(color)かつm(size)の検索の間違いでした。 すみません、慌ててしまって、すべてor検索と思ったのですが 教えて下さったコードにしてみたところ、間違いに気づきました。 もし、すべて「且つ」の検索が可能でしたら この方法もご教示いただけましたら大変有り難いです……。 (styleでskirtを選択したら10の画像が表示。 さらにcolorで、whiteとpinkを選択したら5つの画像に絞られて。 さらにsizeで「M」を選択したら2つに絞られるというような…) ですが、今回教えてくださったコードも、やってみたかったことでぜひ使わせて頂きたいと思っています。 そして、こんなに短いコードになるなんて!…勉強になります。本当にありがとうございます。
yambejp

2018/03/26 06:23

> かつ そうですよね ここで仕様を決める必要があるのは各styleやcolor、sizeが選ばれていない場合どうしたいかです skirt white m はskirtだけ、もしくはskirt + whiteだけ選ばれている時に表示するorしない?を決めて下さい すべて揃わないと表示しないのか一部でも一致すればいいのかによって処理が異なります
alpaca540

2018/03/26 06:37

何度もすみません!! skirt white mの画像は、 skirtだけ選択の時にも表示、 skirt + whiteが選択のときにも表示したいと考えております。
alpaca540

2018/03/26 07:35

今回sousuke様の回答で発見できたのですが 私が使わせて頂いたコードが、yambejp様が回答されたコードだったことがわかりまして 改めてありがとうございました。 本来でしたら、このコードを使わせて頂いたと明記するべきだったのに その旨記載できず申し訳ありませんでした。 jQueryでの検索方法を、ずっと探していて こちらの回答で、一気にやりたいことが進みました。 改めて御礼が言いたくて…何度もコメントしてしまってすみません。 ありがとうございました。
yambejp

2018/03/26 08:47

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

2018/03/26 08:56

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

2018/03/26 09:08

コード教えて下さってありがとうございます。 できました!!!! この検索方法がずっとやりたかったのです。 内容は、これからひとつひとつ勉強させていただきます。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問