Q&A
コードはなるべく質問本文にもご提示ください。
下記の、サンプルを実際に動作させたいと考えております。
途中まで動作していますが、「絞り込む」ボタンをクリックした移行の動作はまだ動作していません。
https://codepen.io/QAtool/pen/EzPzYR
javascriptで、チェックボックスをクリックした後に、ラベルが動作している機能は、以下のとおりです。
$(function() { $('input[name="catItems[]"]').on('change', function() { var catItems = []; $('input[name="catItems[]"]:checked').each(function() { catItems.push('<li class="tag-item">' + $(this).val() + '<span class="close"></span></li>'); }); $('ul.tag-list').html(catItems); $('.tag-item').on('click', function(){ $(this).remove(); var text = $(this).text(); $('.list-options input[value=' + text + ']').prop( 'checked', false ); }); }); $('#clear').on('click', function() { if($("input:checkbox[name='catItems[]']").prop( 'checked', false )){ $("input:checkbox[name='catItems[]']").prop( 'checked', false ); $('ul.tag-list').html(''); } return false; }); });
**【行いたいこと】 **
① 『パターン01』〜『パターン07』のリストをデフォルトでは、display:noneで非表示にしたいです。
② チェックボックスをクリックした後に、ラベルが動作する点は、機能しています。
『パターン01』〜『パターン07』のリストを、「絞り込む」のボタンを押した際に、フィルタリングし表示したいです。
【フィルタリングは、下記data- にて、絞り込みの条件を指定しています】
data-sex= "men wemen"
data-tanmatsu= "smart pc tablet"
data-location= "kanto kansai hokkaido touhoku kinki"
上記の値により、絞り込みを制御するプログラムに致したいと考えております。
何卒どうぞよろしくお願い致します。
>並べ替え(フィルタリング)
フィルタリングはそもそも「絞込」で
並べ替えは「オーダー」または「ソート」なので別物だと思うのですが、タイトルはどのような意図がありますか？
質問本文にも「絞り込み」とありますし、並べ替え要素はないような。
ご指摘の件、誠にありがとうございます。
不足点と修正点を編集させて頂きました。
至らない点があり、申し訳ありません。
動作部分のご回答に関しましても、何卒、どうぞよろしくお願い致します。
補足願います。
1. 性別などの条件カテゴリ内は ORで絞込み、 条件カテゴリ間はANDで絞り込む、ということでいいのでしょうか？
2. input要素のvalue属性の値と、data-属性の値が全くリンクしておらず、条件カテゴリも属性等に現れないのがしんどそうですが、これは必須の仕様ですか？
お世話になっております。
＞1. 性別などの条件カテゴリ内は ORで絞込み、 条件カテゴリ間はANDで絞り込む、ということでいいのでしょうか？
はい。性別をOR、その他は、ANDでお願い致します。
＞2. input要素のvalue属性の値と、data-属性の値が全くリンクしておらず、条件カテゴリも属性等に現れないのがしんどそうですが、これは必須の仕様ですか？
data-sex="男性 女性"という形などに、改変しても問題ありません。
シンプルな形で記述できたらと考えており、属性値などを変更しても結構です。
どのようなコードで、実行が可能であるのかについて学びたいと考えております。
何卒どうぞよろしくお願い致します。
回答1件
0
ベストアンサー
HTMLの属性を追加変更しています。
html
1 <div id="main"> 2 <h1>絞込検索</h1> 3 <form> 4 <div class="list-box"> 5 <ul class="cat-list"> 6 <li> 7 <span class="tl01">性別</span> 8 <ul class="list-options"> 9 <li><label><input type="checkbox" name="catItems[]" value="men" data-category="sex">男性</label></li> 10 <li><label><input type="checkbox" name="catItems[]" value="wemen" data-category="sex">女性</label></li> 11 </ul> 12 </li> 13 <li> 14 <span class="tl02">端末</span> 15 <ul class="list-options"> 16 <li><label><input type="checkbox" name="catItems[]" value="smart" data-category="tanmatsu">スマホ</label></li> 17 <li><label><input type="checkbox" name="catItems[]" value="pc" data-category="tanmatsu">PC</label></li> 18 <li><label><input type="checkbox" name="catItems[]" value="tablet" data-category="tanmatsu">タブレット</label></li> 19 </ul> 20 </li> 21 <li> 22 <span class="tl03">所在地</span> 23 <ul class="list-options"> 24 <li><label><input type="checkbox" name="catItems[]" value="kanto" data-category="location">関東</label></li> 25 <li><label><input type="checkbox" name="catItems[]" value="kansai" data-category="location">関西</label></li> 26 <li><label><input type="checkbox" name="catItems[]" value="hokkaido" data-category="location">北海道</label></li> 27 <li><label><input type="checkbox" name="catItems[]" value="tohoku" data-category="location">東北</label></li> 28 <li><label><input type="checkbox" name="catItems[]" value="kinki" data-category="location">近畿</label></li> 29 </ul> 30 </li> 31 </ul> 32 33 <ul class="tag-list"></ul> 34 35 <ul class="btn-box"> 36 <li><div class="clear-box"><a id="clear" class="btn btn-clear">全てを解除</a></div></li> 37 <li><div class="submit-box"><button id="submit" type="submit" class="btn btn-submit">絞り込む</button></div></li> 38 </ul> 39 40 </div><!-- list-box --> 41 </form> 42 </div> 43 44 45<div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto" class="list"> パターン01 </div> 46 47<div data-sex="men " data-tanmatsu="smart tablet" data-location="kanto" class="list"> パターン02 </div> 48 49<div data-sex="men wemen" data-tanmatsu="pc tablet" data-location="kanto" class="list"> パターン03 </div> 50 51<div data-sex="men wemen" data-tanmatsu="smart tablet" data-location="kanto" class="list"> パターン04 </div> 52 53 54<div data-sex="men wemen" data-tanmatsu="smart pc" data-location="kanto" class="list"> パターン05 </div> 55 56<div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto" class="list"> パターン06 </div> 57 58<div data-sex="men wemen" data-tanmatsu="smart pc tablet" data-location="kanto kansai hokkaido tohoku" class="list"> パターン07 </div>
js
1 $('.list').show(); 2 for ( let category of ['sex', 'tanmatsu', 'location'] ){ //カテゴリごとに 3 // チェックされている条件を配列化 4 const categoryItems = Array.from( $(`input[data-category~="${category}"]:checked`), e => e.value ); 5 // 何もチェックされていなければスキップ 6 if ( categoryItems.length == 0 ) continue; 7 // チェックされている条件のリストを抜き出すセレクタ 8 const categorySelector = categoryItems.map( item => `div[data-${category}~="${item}"]`).join(); 9 // 条件を反転して隠す 10 $(`.list`).not(categorySelector).hide(); 11 } 12
コメントを受けて追記
js
1$(function() { 2 $('input[name="catItems[]"]').on('change', function() { 3 var catItems = []; 4 $('input[name="catItems[]"]:checked').each(function() { 5 catItems.push('<li class="tag-item">' + $(this).val() + '<span class="close"></span></li>'); 6 }); 7 8 $('ul.tag-list').html(catItems); 9 10 $('.tag-item').on('click', function(){ 11 $(this).remove(); 12 13 var text = $(this).text(); 14 $('.list-options input[value=' + text + ']').prop( 'checked', false ); 15 16 }); 17 18 }); 19 20 $('#clear').on('click', function(e) { 21 if($("input:checkbox[name='catItems[]']").prop( 'checked', false )){ 22 23 $("input:checkbox[name='catItems[]']").prop( 'checked', false ); 24 $('ul.tag-list').html(''); 25 26 } 27 28 return false; 29 30 }); 31 32 $('form').on('submit', function(e){ 33 e.preventDefault(); 34 35 $('.list').show(); 36 for ( let category of ['sex', 'tanmatsu', 'location'] ){ //カテゴリごとに 37 // チェックされている条件を配列化 38 const categoryItems = Array.from( $(`input[data-category~="${category}"]:checked`), e => e.value ); 39 // 何もチェックされていなければスキップ 40 if ( categoryItems.length == 0 ) continue; 41 // チェックされている条件のリストを抜き出すセレクタ 42 const categorySelector = categoryItems.map( item => `div[data-${category}~="${item}"]`).join(); 43 // 条件を反転して隠す 44 $(`.list`).not(categorySelector).hide(); 45 } 46 47 }); 48 49});
投稿2019/05/10 02:45
編集2019/05/11 05:26総合スコア36115
誠にありがとうございます。
こちらに、記載頂いたコードを動作させてみました。
https://codepen.io/QAtool/pen/pmyzMO
行いたい動作としましては、「女性」「タブレット」をチェックした際に、
https://codepen.io/QAtool/pen/EzPzYR
のような形で、
①まず「女性」「タブレット」のタグが表示されること
②かつ、『絞り込み』ボタンを押した際に、data- =""の記述に従って、
今回でしたら、
『パターン01』
『パターン03』
『パターン04』
『パターン06』
『パターン07』
が絞り込まれて表示される。
(デフォルトでは、『パターン01』〜『パターン07』は非表示)
という動作を致したいと考えております。
上手く伝えることが出来ておらず、申し訳ありません。
何卒どうぞよろしくお願い致します。
そのようなコードを書いて、こちらでは動作確認できていますが……
言葉が足りなかったようです。
回答したコードは、
$('input[name="catItems[]"]').on('change', function() {
の中に納めてください。
あ、絞込みボタンをトリガーにするのですね。
でしたら、適切なイベントの中に埋めてください。
ご連絡頂き、誠にありがとうございます。
$('input[name="catItems[]"]').on('change', function() {
の中に収める形で、
return false;
以前に、収めて、動作をさせてみました。
https://codepen.io/QAtool/pen/pmyzMO
「女性」「タブレット」をチェックした際に、
『パターン01』
『パターン03』
『パターン04』
『パターン06』
『パターン07』
が絞り込まれる形になっていなかったため、私の設定が間違っている点などありましたら、ご指摘頂けますと幸いです。
何卒どうぞよろしくお願い致します。
> $('input[name="catItems[]"]').on('change', function() {
> の中に収める形で、
> return false;
> 以前に、収めて、動作をさせてみました。
とのことですが、ご提示のURLのコードはそのような形になっていないようでした。
$('#clear').on('click', function(e) {
のイベントの中に入っています。
動作確認ができたスクリプト全体を追記しますので、こちらでご確認いただけますか？
誠にありがとうごさいます。
確認し、無事動作していることを確認致しました。
ありがとうごさいます。
あなたの回答
tips
プレビュー
