表題の通り、以下のサイトを参考にしていたのですが、
絞り込み後の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は割愛しております。
