前提・実現したいこと
jQueryを使用して、buttonを押したタイミングのチェックボックスが選択されている項目だけ取得して、
対応するclassが存在する記事のみ絞り込み表示を行いたいと思っています。
現状では切り替えが中途半端に動いてしまっており、classがついているのに記事が表示されたりされなかったりする状況です。
拙い文章で申し訳ないですが、お知恵をお貸しいただけますと幸いです。
参考サイト:
http://cly7796.net/wp/javascript/implement-the-process-of-narrowing-down-the-list/
http://cly7796.net/wp/sample/implement-the-process-of-narrowing-down-the-list/index3.html
該当のソースコード
html
1 <h2 class="heading-2"> 2 <span class="heading-2__sub">refine search</span> 3 <span class="heading-2__main"> 4 絞り込み検索 5 </span> 6 </h2> 7 <div class="description-list"> 8 <dl class="description-list__item"> 9 <dt class="description-list__heading"> 10 <p class="rparagraph">職種別さがす</p> 11 </dt> 12 <dd class="description-list__content" data-type="type"> 13 <input type="checkbox" value="jobtype1" id="check-01" name="jobtype"><label for="check-01">職種1</label> 14 <input type="checkbox" value="jobtype2" id="check-02" name="jobtype"><label for="check-02">職種2</label> 15 <input type="checkbox" value="jobtype3" id="check-03" name="jobtype"><label for="check-03">職種3</label> 16 </dd> 17 </dl> 18 <dl class="description-list__item"> 19 <dt class="description-list__heading"> 20 <p class="paragraph"> 21 種類でさがす 22 </p> 23 </dt> 24 <dd class="description-list__content" data-type="type"> 25 <input type="checkbox" value="kind1" id="check-04" name="kind"><label for="check-04">種類1</label> 26 <input type="checkbox" value="kind2" id="check-05" name="kind"><label for="check-05">種類2</label> 27 <input type="checkbox" value="kind3" id="check-06" name="kind"><label for="check-06">種類3</label> 28 </dd> 29 </dl> 30 <dl class="description-list__item"> 31 <dt class="description-list__heading"> 32 <p class="paragraph"> 33 業務内容で探す 34 </p> 35 </dt> 36 <dd class="description-list__content" data-type="type"> 37 <input type="checkbox" value="content1" id="check-07" name="content"><label for="check-07">業務内容1</label> 38 <input type="checkbox" value="content2" id="check-08" name="content"><label for="check-08">業務内容2</label> 39 <input type="checkbox" value="content3" id="check-09" name="content"><label for="check-09">業務内容3</label> 40 <input type="checkbox" value="content4" id="check-10" name="content"><label for="check-10">業務内容4</label> 41 </dd> 42 </dl> 43 <dl class="description-list__item"> 44 <dt class="description-list__heading"> 45 <p class="paragraph"> 46 <span>ジャンルで探す</span> 47 </p> 48 </dt> 49 <dd class="description-list__content" data-type="type"> 50 <ul class="checkbox-list"> 51 <li class="checkbox-list__item"> 52 <input type="checkbox" value="genre1" id="check-11" name="genre"><label for="check-11">ジャンル1</label> 53 <input type="checkbox" value="genre2" id="check-12" name="genre"><label for="check-12">ジャンル2</label> 54 <input type="checkbox" value="genre3" id="check-13" name="genre"><label for="check-13">ジャンル3</label> 55 </li> 56 <li class="checkbox-list__item"> 57 <input type="checkbox" value="genre4" id="check-14" name="genre"><label for="check-14">ジャンル4</label> 58 <input type="checkbox" value="genre5" id="check-15" name="genre"><label for="check-15">ジャンル5</label> 59 <input type="checkbox" value="genre6" id="check-16" name="genre"><label for="check-16">ジャンル6</label> 60 </li> 61 <li class="checkbox-list__item"> 62 <input type="checkbox" value="genre7" id="check-17" name="genre"><label for="check-17">ジャンル7</label> 63 <input type="checkbox" value="genre8" id="check-18" name="genre"><label for="check-18">ジャンル8</label> 64 </li> 65 <li class="checkbox-list__item"> 66 <input type="checkbox" value="genre9" id="check-19" name="genre"><label for="check-19">ジャンル9</label> 67 <input type="checkbox" value="genre10" id="check-20" name="genre"><label for="check-20">ジャンル10</label> 68 <input type="checkbox" value="genre11" id="check-21" name="genre"><label for="check-21">ジャンル11</label> 69 </li> 70 </ul> 71 </dd> 72 </dl> 73 <p class="button button--default button--default--bottom"><button class="button--default__link"><span>Search</span></button></p> 74 </div> 75 <div class="result-list"> 76 <div class="result-list__item"> 77 <span class="jobtype"><span class="technical"></span></span> 78 <span class="kind"><span class="yameyou"></span></span> 79 <span class="content"><span class="office"></span><span class="technology"></span></span> 80 <span class="genre"><span class="involvement"></span><span class="yamekae"></span><span class="other"></span></span> 81 <div class="columns columns--one-two"> 82 <div class="columns__column"><img src="img-dummy.jpg"></div> 83 <div class="columns__column"> 84 <div class="result-list__list"> 85 <time class="result-list__date">記事1</time> 86 </div> 87 </div> 88 </div> 89 </div> 90 <div class="result-list__item"> 91 <span class="jobtype"><span class="skill"></span></span> 92 <span class="kind"><span class="yameyou"></span></span> 93 <span class="content"><span class="technology"></span><span class="production"></span></span> 94 <span class="genre"><span class="involvement"></span><span class="study"></span><span class="cost"></span><span class="communication"></span><span class="other"></span></span> 95 <div class="columns columns--one-two"> 96 <div class="columns__column"><img src="img-dummy.jpg"></div> 97 <div class="columns__column"> 98 <div class="result-list__list"> 99 <time class="result-list__date">記事2</time> 100 </div> 101 </div> 102 </div> 103 </div> 104 105 <div class="result-list__item"> 106 <span class="jobtype"><span class="technical"></span><span class="skill"></span><span class="business"></span></span> 107 <span class="kind"><span class="yameyou"></span><span class="kaeyou"></span><span class="hajimeyou"></span></span> 108 <span class="content"><span class="office"></span><span class="technology"></span><span class="production"></span><span class="manufacturing"></span></span> 109 <span class="genre"><span class="involvement"></span><span class="study"></span><span class="paperless"></span><span class="it"></span><span class="tps"></span><span class="cost"></span><span class="communication"></span><span class="yamekae"></span><span class="trouble"></span><span class="efficiency"></span><span class="other"></span></span> 110 <div class="columns columns--one-two"> 111 <div class="columns__column"><img src="img-dummy.jpg"></div> 112 <div class="columns__column"> 113 <div class="result-list__list"> 114 <time class="result-list__date">記事3</time> 115 </div> 116 </div> 117 </div> 118 </div>
jQuery
1$(function() { 2 $(".button--default--bottom button").click(function() { 3 filter_list(); 4 }); 5 6 // リストを絞り込む関数 7 function filter_list() { 8 var lists = $('.result-list__item'); 9 lists.show(); 10 // checkboxの絞り込み 11 for (var i = 0; i < $('.description-list__content').length; i++) { 12 // 絞り込みの項目を取得 13 var item = $('.description-list__content').eq(i).find('input:checkbox').attr('name'); 14 console.log(item); 15 // 絞り込みの対象を取得 16 var target = []; 17 $('[name=' + item + ']:checked').each(function() { 18 target.push($(this).val()); 19 console.log(target); 20 }); 21 22 if(target.length) { 23 for (var j = 0; j < lists.length; j++) { 24 // 絞り込み対象かどうかを調べる 25 var showCheck = false; 26 for (var k = 0; k < target.length; k++) { 27 if(lists.eq(j).find('.' + item).find('span').hasClass(target[k])) { 28 showCheck = true; 29 } 30 } 31 // 絞り込み対象でない場合は非表示 32 if(!showCheck) { 33 lists.eq(j).hide(); 34 } 35 }; 36 } 37 } 38 } 39});
あなたの回答
tips
プレビュー