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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

794閲覧

jQueryでチェックボックスの記事絞り込みについて

gdn

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/05/19 13:47

前提・実現したいこと

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});

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問