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

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

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

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

Q&A

解決済

3回答

7757閲覧

jQueryを使用した複数条件での絞り込み

takatouaya

総合スコア10

jQuery

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

0グッド

0クリップ

投稿2016/08/05 03:18

編集2016/08/05 05:16

jQueryを使用して、要素の絞り込みを行いたいです。

最初はすべての要素が表示されており、チェックボックスにチェックをつける(または外す)ことで、
そのチェックボックスについているidと同じclassを持つ要素の表示・非表示を行いたいと考えています。

下記アドレスで紹介されているものと同じような形だったので、こちらを参考にしてみました。
http://jsdo.it/carl_marie/jquery_hide_rows

ですが、今回、ANDだけでなくORでの条件も必要になってしまい、
例えば、

「attribute01」「attribute02」「type03」「type06」「option03」「option02」

にチェックがついている場合は、

「attribute01」もしくは「attribute02」のclassを持つものの中から「type03」「type06」「option03」「option02」のいずれかのclassを持つものを表示

というようにしたいです。

HTML

1<div id="search"> 2 <ul id="attribute"> 3 <li><label class="selected"><input type="checkbox" id="all" class="sort" checked="checked">すべて</label></li> 4 <li><label><input type="checkbox" id="attribute01" class="sort">attribute01</label></li> 5 <li><label><input type="checkbox" id="attribute02" class="sort">attribute02</label></li> 6 <li><label><input type="checkbox" id="attribute03" class="sort">attribute03</label></li> 7 <li><label><input type="checkbox" id="attribute04" class="sort">attribute04</label></li> 8 <li><label><input type="checkbox" id="attribute05" class="sort">attribute05</label></li> 9 </ul> 10 11 <ul id="type"> 12 <li><label><input type="checkbox" id="type01" class="sort">type01</label></li> 13 <li><label><input type="checkbox" id="type02" class="sort">type02</label></li> 14 <li><label><input type="checkbox" id="type03" class="sort">type03</label></li> 15 <li><label><input type="checkbox" id="type04" class="sort">type04</label></li> 16 <li><label><input type="checkbox" id="type05" class="sort">type05</label></li> 17 <li><label><input type="checkbox" id="type06" class="sort">type06</label></li> 18 <li><label><input type="checkbox" id="type07" class="sort">type07</label></li> 19 <li><label><input type="checkbox" id="type08" class="sort">type08</label></li> 20 </ul> 21 22 <ul id="option"> 23 <li><label><input type="checkbox" id="option01" class="sort">option01</label></li> 24 <li><label><input type="checkbox" id="option02" class="sort">option02</label></li> 25 <li><label><input type="checkbox" id="option03" class="sort">option03</label></li> 26 <li><label><input type="checkbox" id="option04" class="sort">option04</label></li> 27 <li><label><input type="checkbox" id="option05" class="sort">option05</label></li> 28 <li><label><input type="checkbox" id="option06" class="sort">option06</label></li> 29 <li><label><input type="checkbox" id="option07" class="sort">option07</label></li> 30 <li><label><input type="checkbox" id="option08" class="sort">option08</label></li> 31 <li><label><input type="checkbox" id="option09" class="sort">option09</label></li> 32 <li><label><input type="checkbox" id="option10" class="sort">option10</label></li> 33 </ul> 34</div><!-- /.#search --> 35 36<ul id="list"> 37 <li class="attribute01 type01 option03"><a href="#"><img src="sample.jpg"></a></li> 38 <li class="attribute03 type03 type02 option01"><a href="#"><img src="sample.jpg"></a></li> 39 <li class="attribute02 type05 type03 option04 option05"><a href="#"><img src="sample.jpg"></a></li> 40 <li class="attribute05 type06 option06"><a href="#"><img src="sample.jpg"></a></li> 41 <li class="attribute03 type07 option05"><a href="#"><img src="sample.jpg"></a></li> 42 <li class="attribute04 type04 option07"><a href="#"><img src="sample.jpg"></a></li> 43 <li class="attribute03 type02 option08"><a href="#"><img src="sample.jpg"></a></li> 44 <li class="attribute04 type08 option09"><a href="#"><img src="sample.jpg"></a></li> 45 <li class="attribute01 type03 option01"><a href="#"><img src="sample.jpg"></a></li> 46 <li class="attribute02 type02 option10"><a href="#"><img src="sample.jpg"></a></li> 47</ul>

CSS

1#list [class*="hidden-"] { 2 display: none !important; 3} 4

jQuery

1$(function (){ 2 var $filter_tags =['attribute01','attribute02','attribute03','attribute04','attribute05','type01','type02','type03','type04','type05','type06','type07','type08','option01','option02','option03','option04','option05','option06','option07','option08','option09','option10']; 3 var $filter_all = $('#all'); 4 5 //チェックボックスがクリックされた時 6 $("#search li label input").click(function() { 7 8 $(this).parent().toggleClass("selected"); 9 10 $.each($filter_tags, function() { 11 if($('#' + this).is(':checked')) { 12 $("#list li:not(." + this + ")").addClass('hidden-not-' + this); 13 $filter_all.prop('checked',false).parent().removeClass("selected"); 14 } 15 else if($('#' + this).not(':checked')) { 16 $("#list li:not(." + this + ")").removeClass('hidden-not-' + this); 17 } 18 }); 19 20 //チェックボックスが1つも選択されていない場合に、絞り込まないボタンにclass="selected"をつける 21 if ($('.sort:checked').length == 0 ){ 22 $filter_all.prop('checked',true).parent().addClass("selected"); 23 $(".sort").parent().removeClass("selected"); 24 }; 25 }); 26});

ORにするためにはどのようにすればいいのか、全く見当がつかず…
お手数をおかけしますが、よろしくお願いいたします。

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

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

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

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

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

guest

回答3

0

ベストアンサー

こんなかんじ?

JavaScript

1$( function() { 2 $( '#search li label input' ).click( function() { 3 var inputkey = [ 'attribute', 'type', 'option' ] 4 , i, l = inputkey.length 5 , $res, $tmp, res = [] 6 , $all = $( '#all' ); 7 ; 8 $tmp = $( '#list > li' ).removeClass( 'active' ); 9 for ( i = 0; i < l; i++ ) { 10 res = [] 11 $( '#search input[id^="' + inputkey[ i ] + '"]:checked' ).each( function() { 12 res.push( $( this )[ 0 ].id ); 13 } ); 14 if ( !res.length ) { continue; } 15 $tmp = $( '#list > li.' + res.join( ', #list > li.' ) ); 16 if ( !$res || !$res.length ) { 17 $res = $tmp; 18 } else if ( $tmp.length ) { 19 $res = $res.filter( '.' + res.join( ', .' ) ); 20 } 21 } 22 if ( $res && $res.length ) { 23 $res.addClass( 'active' ); 24 $all.prop( 'checked', false ); 25 } else { 26 // No Selected 27 res = false; 28 $all.prop( 'checked', true ); 29 } 30 } ); 31} ); 32```**動くサンプル:**[https://jsfiddle.net/jwqyan5j/](https://jsfiddle.net/jwqyan5j/) 33 34 35--- 36 37**追記:** 38 39絞込みが出来れば #all とかおまけでいいよね?と手を抜いていました。下記でそれについては是正されていると思われます。 40 41```JavaScript 42$( function() { 43 $( '#search li label input:not(#all)' ).click( function() { 44 var inputkey = [ 'attribute', 'type', 'option' ] 45 , i, l = inputkey.length 46 , $res, $tmp, res = [] 47 , $all = $( '#all' ); 48 ; 49 $tmp = $( '#list > li' ).removeClass( 'active' ); 50 for ( i = 0; i < l; i++ ) { 51 res = [] 52 $( '#search input[id^="' + inputkey[ i ] + '"]:checked' ).each( function() { 53 res.push( $( this )[ 0 ].id ); 54 } ); 55 if ( !res.length ) { continue; } 56 $tmp = $( '#list > li.' + res.join( ', #list > li.' ) ); 57 if ( !$res || !$res.length ) { 58 $res = $tmp; 59 } else if ( $tmp.length ) { 60 $res = $res.filter( '.' + res.join( ', .' ) ); 61 } 62 } 63 if ( $res && $res.length ) { 64 $res.addClass( 'active' ); 65 $all.prop( 'checked', false ); 66 } else { 67 // No Selected 68 res = false; 69 $all.prop( 'checked', true ); 70 } 71 } ); 72 $( '#all' ).click( function() { 73 if ( $( this ).prop( 'checked') === true ) { 74 $( '#list > li' ).removeClass( 'active' ); 75 $( '#search input:checked:not(#all)' ).prop( 'checked', false ); 76 } 77 } ); 78} ); 79```**動くサンプル:**[https://jsfiddle.net/jwqyan5j/2/](https://jsfiddle.net/jwqyan5j/2/) 80 81--- 82 83> 今回、絞り込み用のidとclassを「hogehoge01」というような形で、ナンバリングしたものを振っているのですが、これを、ナンバリングではなく、個別に単語で指定することは可能なのでしょうか。 84 85可能です。 86下記部分は「idがinputkey[ i ]('attribute', 'type', 'option')から始まるもののうち、チェックされているもの」を1まとまりとして扱っています。その上でidをクラス名として後で使うために保存しています。 87 88```JavaScript 89$( '#search input[id^="' + inputkey[ i ] + '"]:checked' ).each( function() { 90 res.push( $( this )[ 0 ].id ); 91} );

HTML

1<input type="checkbox" id="attribute01" class="sort"> 2```例えばクラスで1まとまりにすることも出来ます。クラス名で使用する単語をid以外の要素(ここではdata-key)にすることも出来ます。 3```JavaScript 4$( '#search input.' + inputkey[ i ] + ':checked' ).each( function() { 5 res.push( $( this ).attr( 'data-key' ) ); 6} );

HTML

1<input type="checkbox" data-key="keyword" class="sort attribute">

検索条件にヒットするものがなかった場合

「// No Selected」の後の部分でそういったコードを追加すればいいと思いますよ。
(今はとりあえず#allをチェックすることしかしていません)

投稿2016/08/05 08:05

編集2016/08/05 10:58
kei344

総合スコア69357

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

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

takatouaya

2016/08/05 10:19

ご回答いただき、ありがとうございます! ご教示いただいたスクリプトで、かなり近い形を実現できました。 差し支えなければ、合わせてお伺いしたいのですが、 チェックボックスにチェックを入れると、 最初についている「すべて」のチェックが外れるのですが、 再度「すべて」にチェックを入れると、要素が表示されなくなってしまいました。 ただ、要素が再度表示されない件に関しては、 $all.prop( 'checked', true ); の直前に $( '#list > li' ).addClass( 'active' ); を追記することで対応できたのですが、 「すべて」のチェックが外れたあと、「すべて」をクリックしても、チェックを入れることができなくなってしまいました。 こちら、一度「すべて」のチェックが外れてしまったあと、クリックでにチェックを入れると、すべての要素が表示され、 「すべて」以外のチェックボックスのチェックが外れるようにすることはできるのでしょうか。 もう1点、こちらは後学のためという意味合いが強いのですが、 今回、絞り込み用のidとclassを「hogehoge01」というような形で、ナンバリングしたものを振っているのですが、これを、ナンバリングではなく、個別に単語で指定することは可能なのでしょうか。 具体的なスクリプトをご教示いただいたのに大変恐縮なのですが、 よろしくお願いします。
takatouaya

2016/08/05 10:39

五月雨になってしまい申し訳ありません… 検索条件にヒットするものがなかった場合、すべての要素が表示されてしまうようです…。 できれば、「ヒットする項目はありませんでした」などの文言を表示させたいのですが、 この件に関しまして、ご教示いただくことは可能でしょうか。
kei344

2016/08/05 10:58

追記しました。
takatouaya

2016/08/05 11:49

追記していただいた内容で、検索条件にヒットするものがなかった場合の処理も含め、 対応することができました。 質問に対してのご回答もいただき、大変助かりました。 詳しいご説明で、大変勉強になりました。ありがとうございます。
guest

0

こういうことじゃなくて?

CASE 1 OR [ when1 か when2 をもつオブジェクト ]

js

1$(".when1,.when2")

CASE 2 AND [ when1 と when2 をもつオブジェクト ]

js

1$(".when1.when2")

CASE 3 OR AND OR has

「attribute01」「attribute02」に加え、「type01」「option01」にチェックをした場合、
「attribute01」でかつ、「type01」か「option01」を持つものと、
「attribute02」でかつ、「type01」か「option01」を持つものを表示

js

1$("li:has(.attribute01,.attribute02):has(.type01,.option01)"); // ノーテスト 2

投稿2016/08/05 03:49

編集2016/08/05 05:53
asahina_dev

総合スコア610

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

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

takatouaya

2016/08/05 05:33

ご回答いただきまして、ありがとうございます。 説明不足ですみません。 投稿時に記載していたサンプルを使って補足しますと、 「attribute01」「attribute02」 にのみチェックされた場合は、 $("#list li").fadeOut(); // 要素のリストを全て消す $(".attribute01, .attribute02").fadeIn(); // ヒットした要素のみ再表示 のような形にできれば、どちらかのclassがヒットした場合に表示させることができ、 「attribute01」「attribute02」「type01」「option01」 にチェックをした場合、 $("#list li").fadeOut(); // 要素のリストを全て消す $(".attribute01.type01, .attribute01.option01, .attribute02.type01, .attribute02.option01").fadeIn(); // ヒットした要素のみ再表示 と書いているような形にできれば、なんとなく表示非表示ができるのでは、 と思ったのですが、 「attribute01」「attribute02」にのみチェックがある場合、 「attribute01」「attribute02」のどちらかのクラスを持つものをすべて表示 という形と、 「attribute01」「attribute02」に加え、「type01」「option01」にチェックをした場合、 「attribute01」でかつ、「type01」か「option01」を持つものと、 「attribute02」でかつ、「type01」か「option01」を持つものを表示 という形を実現させるためには、どのようにif文内の記述や、チェックボックスとの連携を行うのかがわからず、質問しました。 念のための補足なのですが、サンプルコードのHTML部分に記述を追加しました。 「attribute01〜05」をのいずれかを同時に持つ要素はないのですが、 「type01〜08」と「option01〜10」については、 複数のtype、もしくはoptionを持つことがあります。 お手数をおかけいたしますが、よろしくお願いします。
takatouaya

2016/08/05 07:08

度々ありがとうございます。 ちょっと、うまいこと使っていく方法がわからなかったので、もう少し考えてみます。
guest

0

すみません、さきほど掲載したの間違えていました。
CSSのソースもつけていなかったのでわかりにくかったと思います。
ちょっとわかりやすいように横並びに変えちゃいましたがこんな感じでしょうか?
サンプル

投稿2016/08/05 06:48

編集2016/08/05 08:52
NatsumiOki

総合スコア1298

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

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

NatsumiOki

2016/08/05 08:31

あ、ごめんなさい間違えてるなこれ・・・
takatouaya

2016/08/05 09:09

ご回答いただきまして、ありがとうございます! ちょっと条件が多くてわかりにくくなってしまい、申し訳ありません…。 私の方でも、ANDだけ、やORだけ、という形であれば、 それらしいものができたのですが、サンプル内の「type」や「option」が、このような形で絡んでくるとどうすれば良いのか…といった状態になってしまったので、 質問させていただきました。 だいぶヒントをいただいた感じなので、私の方でも、もう少し頑張ってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問