Q&A
実現したいのは、絞り込み後も対象数が7以上の場合7番目以降を非表示にしmoreボタンをクリックで追加表示を実装したいです。
表題の通り、以下のサイトを参考にしていたのですが、
絞り込み後のmoreボタンの挙動でつまづきました。
moreボタンのscriptにより、ページ読み込み時に７番目以降が非表示（moreクリック時に表示）の対象になるため、絞り込み後、６番目までに絞り込みの対象物がない場合、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は割愛しております。
また、関係ないかと思い質問に記述していなかったのですが、絞り込み部分のソースを以下のようにしています。
(ドロップダウン風の見た目にするためです。)
--------------------
<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>
--------------------
絞り込み後のmoreボタンクリック時の挙動は、絞り込み前と同じ挙動を希望。
(moreボタンクリックで3個追加表示)
また、一度moreボタンが消失すると、別の絞り込み条件に変更した際にmoreボタンが非表示のままになってしまうので、絞り込み後対象が7個以上の場合はmoreボタンも再表示させたいです。
(6個以下の場合はmoreボタン非表示。)
回答1件
0
こういうことですか？
js
1 $(document).on('change', searchBox + ' input', function () { 2 $('.is-hidden').removeClass('is-hidden'); /* 追加 */ 3 search_filter(); 4 });
コメントを受けて追記
実現したいのは、絞り込み後も対象数が7以上の場合7番目以降を非表示にしmoreボタンをクリックで追加表示を実装したいです。
js
1 $(document).on('change', searchBox + ' input', function () { 2 $('.is-hidden').removeClass('is-hidden'); /* 追加 */ 3 search_filter(); 4/* 追加ここから */ 5 var show = 6; //最初に表示する件数 6 var num = 3; //clickごとに表示したい件数 7 var contents = '.list li'; // 対象のlist 8 // $(contents + ':visible:eq(n + ' + (show + 1) + ')').addClass('is-hidden'); 訂正 9 $(contents + ':visible').slice(show).addClass('is-hidden'); 10 $('.more').on('click', function () { 11 $(contents + '.is-hidden').slice(0, num).removeClass('is-hidden'); 12 if ($(contents + '.is-hidden').length == 0) { 13 $('.more').fadeOut(); 14 } 15 }); 16/* 追加ここまで */ 17 });
投稿2022/03/28 02:17
編集2022/03/29 03:32
総合スコア33757
回答へのコメント
ありがとうございます。
ご回答いただいた内容ですと、絞り込み時に全てのis-hiddenが削除されるため、7番目以降非表示が出来なくなるかと思います。
実現したいのは、絞り込み後も対象数が7以上の場合7番目以降を非表示にしmoreボタンをクリックで追加表示を実装したいです。
よろしくお願いいたします。
それは質問に書いた方がよさそうですね。
追加された条件に合わせて追記しました。
ありがとうございます。
追記していただいた内容で試してみましたが、
絞り込み後の対象のみではなく、再度全てのliが対象になるようで、変化がありませんでした。
例えば「JavaScript」を選択(絞り込み)した場合、対象物の「JavaScript」が7個以上であれば、JavaScriptの7個目以降のみis-hiddenとし、moreボタンクリックで追加表示したいと思っております。
度々申し訳ございません。
当方の環境ではそのように動作しました。
上手くいかないコードをご提示いただければ何かわかることがあるかもしれないですね。
なお、達成したい条件があるなら質問に書いた方がいいと思いますよ。他の回答者が、このコメント欄を読むとは限らないです。
ありがとうございます。
当サイトを利用するのも初めてでして、ご助言いただけて助かります。
追加の条件は質問内容を編集しました。
上手くいかないコードの記述はこちらに提示で良いものでしょうか・・・
いまいちやり方が分かっておらず。すみません。
script部分
---------------------------
<script>
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();
}
});
var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
var listItem = '.list_item'; // 絞り込み対象のアイテム
var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名
$(function() {
// 絞り込み項目を変更した時
$(document).on('change', searchBox + ' input', function() {
$('.is-hidden').removeClass('is-hidden'); /* 追加 */
search_filter();
/* 追加ここから */
var show = 6; //最初に表示する件数
var num = 3; //clickごとに表示したい件数
var contents = '.list li'; // 対象のlist
$(contents + ':visible:eq(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();
}
});
/* 追加ここまで */
});
});
/**
* リストの絞り込みを行う
*/
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>
また、関係ないかと思い質問に記述していなかったのですが、絞り込み部分のソースを以下のようにしています。
(ドロップダウン風の見た目にするためです。)
念のため追記しました。
--------------------
<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>
--------------------
ああ、ほんとですね。失礼しました。修正します。
ありがとうございます。
大変助かります。
よろしくお願いいたします。
わかりにくくてすみません。修正済みです。
とんでもございません。ありがとうございます。
早速試してみました。
絞り込み後の挙動は望み通りのものになっておりました！
ありがとうございます！
ただ、絞り込み後moreボタンをクリックすると、意図しない個数が表示されてしまいます。
また、一度moreボタンが消失すると、別の絞り込み条件に変更した際にmoreボタンが非表示のままになってしまうので、絞り込み後対象が7個以上の場合はmoreボタンも再表示させたいです。(6個以下の場合はmoreボタン非表示。)
お手数おかけしますが、何卒よろしくお願いいたします。
後出し多くないですか……？
勘違いされているかもしれませんので、少し厳しいことを申し上げますが、このサイトで回答者が「完動品を納品」することはないです。そういうものを望んでいるならば業者にお金を払って発注してください。
完成させる主体はあなたです。
回答者は少しそのお手伝いをするだけです。
回答されたコードに少々の不具合があっても、それは自分で直すのが当たり前だと心得てください。
失礼いたしました。ありがとうございます。
>絞り込み後moreボタンをクリックすると、意図しない個数が表示されてしまいます。
こちらについては、下記のコードで解決いたしました。
$(document).on('change', searchBox + ' input', function() {
$('.is-hidden').removeClass('is-hidden'); /* 追加 */
search_filter();
/* 追加ここから */
var show = 6; //最初に表示する件数
var num = 3; //clickごとに表示したい件数
var contents = '.list li'; // 対象のlist
// $(contents + ':visible:eq(n + ' + (show + 1) + ')').addClass('is-hidden'); 訂正
$(contents + ':visible').slice(show).addClass('is-hidden');
$('.more').on('click', function () {
$(contents + ':visible').slice(0, num).removeClass('is-hidden');
if ($(contents + '.is-hidden').length == 0) {
$('.more').fadeOut();
}
});
/* 追加ここまで */
});
追加の要件については、時間をかければ自己解決できそうです。
ありがとうございました。
改めてベストアンサーとさせていただきます。
ご解決されて何よりです。
あなたの回答
tips
プレビュー
