Q&A
> jQuery未勉強者ですが、
勉強していないのであれば回答(解説)しても理解されないと思うのですが、どのような回答をお望みなのでしょうか
jQueryを使って、タブ切り替えのフィルタリング機能を実装しようと考えております。
フィルターは「大カテゴリー」と「小カテゴリー」の２階層に分かれていて、「大カテゴリー」でフィルタリングした値を「小カテゴリー」フィルターを使用してさらに細分化表示が出来るようになっております。
大カテゴリーフィルターは以下の３種
・All
・大カテゴリーA
・大カテゴリーB
で、
いずれかのタブを選択した際には、さらに４項目の小カテゴリー用のタブが表示され、そちらを選択する事でそれぞれにカテゴライズされた値を表示します。
【大カテゴリーA選択時】
・A小カテゴリー１
・A小カテゴリー２
・A小カテゴリー３
・A小カテゴリー４
【大カテゴリーB選択時】
・B小カテゴリー１
・B小カテゴリー２
・B小カテゴリー３
・B小カテゴリー４
大カテゴリーAll選択時には、全ての値が表示される様になっています。
以下ソースです。
HML
1<div class="tab" style="text-align:center;"><!--大カテゴリーfilter--> 2 <a href="" data-filter="all" >ALL</a> 3 <a href="" data-filter="A">大カテゴリーA</a> 4 <a href="" data-filter="B">大カテゴリーB</a> 5</div> 6 7<div class="list"><!--ここから〜大カテゴリー値--> 8 <!--小カテゴリー All用フィルター--> 9 <!--data-filterで複数値の指定が出来ない為、機能していません。【課題２】--> 10 <div class="under-tab" data-category="" > 11 <a href="" data-filter="a1 b1">ALL時の小カテゴリー１</a> 12 <a href="" data-filter="a2 b2">ALL時の小カテゴリー２</a> 13 <a href="" data-filter="a3 b3">ALL時の小カテゴリー３</a> 14 <a href="" data-filter="a4 b4">ALL時の小カテゴリー４</a> 15 </div> 16 <!--小カテゴリー A用フィルター ※ALLの時は非表示にしたい【課題１】--> 17 <div class="under-tab" data-category="A" style="display:none;"> 18 <a href="" data-filter="a1">A小カテゴリー１</a> 19 <a href="" data-filter="a2">A小カテゴリー２</a> 20 <a href="" data-filter="a3">A小カテゴリー３</a> 21 <a href="" data-filter="a4">A小カテゴリー４</a> 22 </div> 23 <!--小カテゴリー B用フィルター ※ALLの時は非表示にしたい【課題１】--> 24 <div class="under-tab" data-category="B" style="display:none;"> 25 <a href="" data-filter="b1">B小カテゴリー１</a> 26 <a href="" data-filter="b2">B小カテゴリー２</a> 27 <a href="" data-filter="b3">B小カテゴリー３</a> 28 <a href="" data-filter="b4">B小カテゴリー４</a> 29 </div><!--ここまで〜大カテゴリー値--> 30 31 <ul class="under-list"><!--ここから〜小カテゴリー値--> 32 <li data-category="A a1">A-１</li> 33 <li data-category="B b1">B-１</li> 34 <li data-category="A a2">A-２</li> 35 <li data-category="B b2">B-２</li> 36 <li data-category="A a3">A-３</li> 37 <li data-category="B b3">B-３</li> 38 <li data-category="A a4">A-４</li> 39 <li data-category="B b4">B-４</li> 40 </ul><!--ここまで〜小カテゴリー値--> 41</div>
CSS
1.tab{ margin:30px 0 50px; } 2.tab a{ border:solid black 5px; padding:10px; } 3.under-tab{ text-align:center; margin:30px; } 4.under-tab a{ border:solid red 3px; padding:10px; } 5.under-tab:nth-child(2) a{ border:solid yellow 3px; } 6.under-tab:nth-child(3) a{ border:solid green 3px; }
jQuery
1$(function(){ 2 var $tab = $('.tab [data-filter]'),//大カテゴリーフィルター 3 $list = $('.list [data-category]'),//大カテゴリー値 4 $underTab = $('.under-tab [data-filter]'),//小カテゴリーフィルター 5 $underList = $('.under-list [data-category]');//大カテゴリー値 6 7//大カテゴリーフィルタリング機能 8 $tab.on('click', function(e) { 9 e.preventDefault(); 10 11 var $btnTxt = $(this).attr('data-filter'); 12 13 if ($btnTxt == 'all'){ 14 $list.fadeOut().promise().done(function() { 15 $list.addClass('animate').fadeIn(); 16 });//allの時にはとかく全てをfadeInする 17 } else { 18 $list.fadeOut().promise().done(function() { 19 $list.filter('[data-category~= "' + $btnTxt + '"]').addClass('animate').fadeIn(); 20 });//allじゃない時にはfilterをかけてdata-categoryの値が一致したもののみをfadeInする 21 } 22 }); 23 24//小カテゴリーフィルリング機能 25 $underTab.on('click', function(e) { 26 e.preventDefault(); 27 28 var $btnTxt = $(this).attr('data-filter'); 29 30 if ($btnTxt == 'all'){ 31 $underList.fadeOut().promise().done(function() { 32 $underList.addClass('animate').fadeIn(); 33 }); 34 } else { 35 $underList.fadeOut().promise().done(function() { 36 $underList.filter('[data-category~= "' + $btnTxt + '"]').addClass('animate').fadeIn(); 37 }); 38 } 39 }); 40 41}); 42</script> 43 44<script>//選択中タブの可視化用 45$(function(){ 46 var tabOn = $('.tab a'); 47 tabOn.click(function(){ 48 tabOn.removeClass('tab_active'); 49 $(this).addClass('tab_active'); 50 }); 51}); 52</script>
###課題１
大カテゴリー「All」を選択時には全ての値が表示されるのですが、この時には「Aカテゴリー」と「Bカテゴリー」のフィルタータブは非表示にしたい。
（All用に作成したフィルタータブのみ表示したい。）
###課題２
All用のフィルタータブをクリックした場合、「A小カテゴリー」と「B小カテゴリー」それぞれの値を表示したい。
※data-filterで、複数の値を適用したい。
【All用フィルターの値】
・小カテゴリーA、Bそれぞれの１
・小カテゴリーA、Bそれぞれの２
・小カテゴリーA、Bそれぞれの３
・小カテゴリーA、Bそれぞれの４
以上
何卒お力添えいただけますと幸いでございます。
よろしくお願い致します。
実際のソースコード変更箇所を教えていただけると有り難いです。
本件jQuery部分も試行錯誤しながらなんとなくで理解を進めておりましたが。。。
teratail利用の認識も含めて、勉強不足でした。
真面目にご回答くださいます利用者の皆様には、大変失礼いたしました。
つまり、どうしたら直るのかを理解したいわけではなく、単純に直してほしいということですか？
おっと、タイミングが重なってしまいましたね。私の14:01のコメントは、先の「実際のソースコード変更箇所を教えていただけると有り難いです。」に対する質問です。
＞つまり、どうしたら直るのかを理解したいわけではなく、単純に直してほしいということですか？
恥ずかしながら、初めはそういう意図が大きかったです。
ご指摘いただいて考え方を改めました。
お目汚し失礼いたしました。
考え方を改められたとのことですので改善すべき点を指摘することにします。
ありがとうございます。
何卒よろしくお願い申し上げます。
回答2件
0
課題１
大カテゴリー「All」を選択時には全ての値が表示されるのですが、この時には「Aカテゴリー」と「Bカテゴリー」のフィルタータブは非表示にしたい。
（All用に作成したフィルタータブのみ表示したい。）
js
1 if ($btnTxt == 'all'){ 2 $list.fadeOut().promise().done(function() { 3 $list.addClass('animate').fadeIn(); 4 });//allの時にはとかく全てをfadeInする 5 } else { 6 $list.fadeOut().promise().done(function() { 7 $list.filter('[data-category~= "' + $btnTxt + '"]').addClass('animate').fadeIn(); 8 });//allじゃない時にはfilterをかけてdata-categoryの値が一致したもののみをfadeInする 9 }
ここで「とにかくすべてをfadeIn」しているのが原因です。
課題２
All用のフィルタータブをクリックした場合、「A小カテゴリー」と「B小カテゴリー」それぞれの値を表示したい。
※data-filterで、複数の値を適用したい。
やりかたはいくつかありますが、現状のコードを活かすのであれば、filter() に何を渡すのかを意識するのがよいでしょう。
API Document を見ると、 filter() には複数の引数を渡すことができると書いてあります。このうち、 selector を渡すか、 function を渡すのがよいかと思います。
selector を渡す場合ですが、セレクタはカンマ区切りで複数指定することができますので、
js
1const filterString = $(this).attr('data-filter').split(' ').map(function(category) { 2 return `[data-category~="${category}"]`; 3}).join(',');
とすることで、複数の条件をターゲットとしたセレクターを作ることができます。
他方、 function を渡す場合では、シンプルに .filter(function() { $(this) }) の形で、フィルターの検査対象の要素の一つ一つにアクセスすることができますので、この $(this) に対して条件分けをして、最終的に function の中で return true すればフィルターの結果表示され、 return false すればフィルターの結果除外されます。
投稿2020/01/14 05:19
総合スコア2982
ご回答ありがとうございます。
・課題１について
if ($btnTxt == 'all'){
$list.fadeOut().promise().done(function() {
$list.addClass('animate').fadeIn();
});//allの時にはとかく全てをfadeInする
この箇所の中の .fadeIn(); にて、表示したくないものを除外出来ればいいんですね。
・課題２について
いただいたコードを紐解きながら、勉強を進める事が出来ます。
ありがとうございます！
あなたの回答
tips
プレビュー
