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

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

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

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

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

受付中

jQueryでリスト表示を絞り込む処理を実装したあとに、moreボタンを組み合わせたところ、絞り込み後のmoreボタンの挙動がうまくいきません。

takashipon0326
takashipon0326

総合スコア0

JavaScript

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

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

1クリップ

942閲覧

投稿2022/03/27 07:29

編集2022/03/29 14:04

表題の通り、以下のサイトを参考にしていたのですが、
絞り込み後のmoreボタンの挙動でつまづきました。

moreボタンのscriptにより、ページ読み込み時に7番目以降が非表示(moreクリック時に表示)の対象になるため、絞り込み後、6番目までに絞り込みの対象物がない場合、moreボタンだけが表示され対象物が出るまでmoreをクリックしないと表示されない状況です。

実現したいのは、絞り込み後も対象数が7以上の場合7番目以降を非表示にしmoreボタンをクリックで追加表示を実装したいです。
(例えば「JavaScript」を選択(絞り込み)した場合、対象物の「JavaScript」が7個以上であれば、JavaScriptの7個目以降のみis-hiddenとし、moreボタンクリックで追加表示したいと思っております。)

色々調べながら試行錯誤したのですが、javascript,jquery初心者のため、解決策が分からず...
お力添えいただけますと幸いです。

https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html

<style> .search-box_label { font-weight: bold; } .is-hide { display: none; } .list li.is-hidden { visibility: hidden; opacity: 0; height: 0; margin: 0 10px; padding:0; } </style> <form> <div class="search-box"> <span class="search-box_label">Category:</span> <input type="radio" name="category" value="">ALL <input type="radio" name="category" value="HTML・CSS">HTML・CSS <input type="radio" name="category" value="JavaScript">JavaScript <input type="radio" name="category" value="CMS">CMS <input type="radio" name="category" value="Program">Program <input type="radio" name="category" value="Mobile">Mobile <input type="radio" name="category" value="SEO・SEM">SEO・SEM <input type="radio" name="category" value="ツール">ツール <input type="radio" name="category" value="その他">その他 <input type="radio" name="category" value="殿堂入り">殿堂入り </div> <div class="search-box"> <span class="search-box_label">Tag:</span> <input type="checkbox" name="tag" value="adobe">adobe <input type="checkbox" name="tag" value="Android">Android <input type="checkbox" name="tag" value="Chrome">Chrome <input type="checkbox" name="tag" value="CSSの設計">CSSの設計 <input type="checkbox" name="tag" value="font">font <input type="checkbox" name="tag" value="Google Chrome">Google Chrome <input type="checkbox" name="tag" value="gulp">gulp <input type="checkbox" name="tag" value="heroku">heroku <input type="checkbox" name="tag" value="icon">icon <input type="checkbox" name="tag" value="iPhone">iPhone <input type="checkbox" name="tag" value="meta">meta <input type="checkbox" name="tag" value="Movable Type">Movable Type <input type="checkbox" name="tag" value="mysql">mysql <input type="checkbox" name="tag" value="photoshop">photoshop <input type="checkbox" name="tag" value="Sass">Sass <input type="checkbox" name="tag" value="ssh">ssh <input type="checkbox" name="tag" value="SVG">SVG <input type="checkbox" name="tag" value="Webフォント">Webフォント <input type="checkbox" name="tag" value="アドオン">アドオン <input type="checkbox" name="tag" value="アニメーション">アニメーション <input type="checkbox" name="tag" value="エクステンション">エクステンション <input type="checkbox" name="tag" value="参考サイト">参考サイト <input type="checkbox" name="tag" value="シェア">シェア <input type="checkbox" name="tag" value="シェア調査">シェア調査 <input type="checkbox" name="tag" value="書体">書体 <input type="checkbox" name="tag" value="縦書き">縦書き <input type="checkbox" name="tag" value="縦組み">縦組み <input type="checkbox" name="tag" value="デザイン">デザイン <input type="checkbox" name="tag" value="デバッグ">デバッグ <input type="checkbox" name="tag" value="ブラウザ">ブラウザ <input type="checkbox" name="tag" value="プラグイン">プラグイン </div> </form> <ul class="list"> <li class="list_item" data-category='Program' data-tag='["ssh", "mysql"]'> <a href="https://www.tam-tam.co.jp/tipsnote/program/post14579.html">SSH のポートフォワーディングを使って MySQL に接続する</a><br> Category: Program Tag: ssh,mysql </li> <li class="list_item" data-category='["ツール", "その他"]' data-tag='["photoshop", "エクステンション"]'> <a href="https://www.tam-tam.co.jp/tipsnote/tool/post14513.html">Photoshopのエクステンションを自作する</a><br> Category: ツール,その他 Tag: photoshop,エクステンション </li> <li class="list_item" data-category='ツール' data-tag='["アドオン", "Google Chrome"]'> <a href="https://www.tam-tam.co.jp/tipsnote/tool/post14457.html">スピードアップ!仕事効率化おすすめChromeアドオン5選</a><br> Category: ツール Tag: アドオン,Google Chrome </li> <li class="list_item" data-category='["HTML・CSS", "その他"]' data-tag='["iPhone", "Android", "ブラウザ", "シェア"]'> <a href="https://www.tam-tam.co.jp/tipsnote/html_css/post14411.html">対象ブラウザを見直してみる(2018年1月版)</a><br> Category: HTML・CSS,その他 Tag: iPhone,Android,ブラウザ,シェア </li> <li class="list_item" data-category='HTML・CSS' data-tag='["SVG", "アニメーション"]'> <a href="https://www.tam-tam.co.jp/tipsnote/html_css/post14400.html">SVGでリアルな湯気を作ってみる</a><br> Category: HTML・CSS Tag: SVG,アニメーション </li> <li class="list_item" data-category='その他' data-tag='["シェア調査", "ブラウザ"]'> <a href="https://www.tam-tam.co.jp/tipsnote/others/post13405.html">スマートフォン・PCのブラウザシェア調査(2017年12月分)</a><br> Category: その他 Tag: シェア調査,ブラウザ </li> <li class="list_item" data-category='["HTML・CSS", "その他"]' data-tag='["font", "参考サイト", "縦書き", "デザイン"]'> <a href="https://www.tam-tam.co.jp/tipsnote/html_css/post13923.html">和風の縦書きサイトを作る時に気をつけたこと</a><br> Category: HTML・CSS,その他 Tag: font,参考サイト,縦書き,デザイン </li> <li class="list_item" data-category='["HTML・CSS", "その他"]' data-tag='["Webフォント", "font", "書体", "縦書き", "縦組み"]'> <a href="https://www.tam-tam.co.jp/tipsnote/html_css/post13996.html">文字についてとCSSでの文字の制御(縦書きもあるよ)について</a><br> Category: HTML・CSS,その他 Tag: Webフォント,font,書体,縦書き,縦組み </li> <li class="list_item" data-category='ツール' data-tag='["photoshop", "adobe"]'> <a href="https://www.tam-tam.co.jp/tipsnote/tool/post13915.html">これが便利!Photoshop CC 2018の新機能</a><br> Category: ツール Tag: photoshop,adobe </li> <li class="list_item" data-category='Program' data-tag='heroku'> <a href="https://www.tam-tam.co.jp/tipsnote/program/post14102.html">Heroku のエラーページをカスタマイズする</a><br> Category: Program Tag: heroku </li> <li class="list_item" data-category='JavaScript' data-tag='["SVG", "gulp", "icon", "font"]'> <a href="https://www.tam-tam.co.jp/tipsnote/javascript/post11005.html">gulpでsvgからアイコンフォントを作成する</a><br> Category: JavaScript Tag: SVG,gulp,icon,font </li> <li class="list_item" data-category='CMS' data-tag='["Movable Type", "プラグイン"]'> <a href="https://www.tam-tam.co.jp/tipsnote/cms/post13620.html">Movable Typeの構築や運用時によく使うプラグイン8選</a><br> Category: CMS Tag: Movable Type,プラグイン </li> <li class="list_item" data-category='["HTML・CSS", "Mobile"]' data-tag='["Chrome", "デバッグ"]'> <a href="https://www.tam-tam.co.jp/tipsnote/html_css/post12799.html">Android の Chrome で開いたページを、PC から DevTools でデバッグする</a><br> Category: HTML・CSS,Mobile Tag: Chrome,デバッグ </li> <li class="list_item" data-category='["HTML・CSS", "SEO・SEM"]' data-tag='meta'> <a href="">開発環境でも使えるメタ情報チェックツール「Simple Meta Checker」を作りました</a><br> Category: HTML・CSS,SEO・SEM Tag: meta </li> <li class="list_item" data-category='["HTML・CSS", "殿堂入り"]' data-tag='["Sass", "CSSの設計"]'> <a href="https://www.tam-tam.co.jp/tipsnote/html_css/post10205.html">CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える</a><br> Category: HTML・CSS,殿堂入り Tag: Sass,CSSの設計 </li> </ul> <div class="more"> <button>もっと見る</button> </div> <script> var searchBox = '.search-box'; // 絞り込む項目を選択するエリア var listItem = '.list_item'; // 絞り込み対象のアイテム var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 $(function() { // 絞り込み項目を変更した時 $(document).on('change', searchBox + ' input', function() { search_filter(); }); }); /** * リストの絞り込みを行う */ function search_filter() { // 非表示状態を解除 $(listItem).removeClass(hideClass); for (var i = 0; i < $(searchBox).length; i++) { var name = $(searchBox).eq(i).find('input').attr('name'); // 選択されている項目を取得 var searchData = get_selected_input_items(name); // 選択されている項目がない、またはALLを選択している場合は飛ばす if(searchData.length === 0 || searchData[0] === '') { continue; } // リスト内の各アイテムをチェック for (var j = 0; j < $(listItem).length; j++) { // アイテムに設定している項目を取得 var itemData = get_setting_values_in_item($(listItem).eq(j), name); // 絞り込み対象かどうかを調べる var check = array_match_check(itemData, searchData); if(!check) { $(listItem).eq(j).addClass(hideClass); } } } } /** * inputで選択されている値の一覧を取得する * @param {String} name 対象にするinputのname属性の値 * @return {Array} 選択されているinputのvalue属性の値 */ function get_selected_input_items(name) { var searchData = []; $('[name=' + name + ']:checked').each(function() { searchData.push($(this).val()); }); return searchData; } /** * リスト内のアイテムに設定している値の一覧を取得する * @param {Object} target 対象にするアイテムのjQueryオブジェクト * @param {String} data 対象にするアイテムのdata属性の名前 * @return {Array} 対象にするアイテムのdata属性の値 */ function get_setting_values_in_item(target, data) { var itemData = target.data(data); if(!Array.isArray(itemData)) { itemData = [itemData]; } return itemData; } /** * 2つの配列内で一致する文字列があるかどうかを調べる * @param {Array} arr1 調べる配列1 * @param {Array} arr2 調べる配列2 * @return {Boolean} 一致する値があるかどうか */ function array_match_check(arr1, arr2) { // 絞り込み対象かどうかを調べる var arrCheck = false; for (var i = 0; i < arr1.length; i++) { if(arr2.indexOf(arr1[i]) >= 0) { arrCheck = true; break; } } return arrCheck; } </script>

https://oku-log.com/blog/btn-more/

var show = 6; //最初に表示する件数 var num = 3; //clickごとに表示したい件数 var contents = '.list li'; // 対象のlist $(contents + ':nth-child(n + ' + (show + 1) + ')').addClass('is-hidden'); $('.more').on('click', function () { $(contents + '.is-hidden').slice(0, num).removeClass('is-hidden'); if ($(contents + '.is-hidden').length == 0) { $('.more').fadeOut(); } });

細かなcssは割愛しております。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

takashipon0326

2022/03/29 01:23

実現したいのは、絞り込み後も対象数が7以上の場合7番目以降を非表示にしmoreボタンをクリックで追加表示を実装したいです。
takashipon0326

2022/03/29 03:16

また、関係ないかと思い質問に記述していなかったのですが、絞り込み部分のソースを以下のようにしています。 (ドロップダウン風の見た目にするためです。) -------------------- <div class="search-box"> <div class="select"> <input type="radio" name="area" value="all"> <i class="toggle select_arrowdown"></i> <i class="toggle select_arrowup"></i> <span class="select_label">地域別検索</span> <label class="option"> <input type="radio" name="area" value="関東"> <span class="select_title">関東</span> </label> <label class="option"> <input type="radio" name="area" value="近畿"> <span class="select_title">近畿</span> </label> </div> </div> --------------------
takashipon0326

2022/03/29 04:11

絞り込み後のmoreボタンクリック時の挙動は、絞り込み前と同じ挙動を希望。 (moreボタンクリックで3個追加表示) また、一度moreボタンが消失すると、別の絞り込み条件に変更した際にmoreボタンが非表示のままになってしまうので、絞り込み後対象が7個以上の場合はmoreボタンも再表示させたいです。 (6個以下の場合はmoreボタン非表示。)

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。