Q&A
<ul class="list" id="number_list">に追加していくような形でいいと思います。
前提・実現したいこと
jQueryを使用して、
①最初の10件が表示された状態
→「もっと見る」ボタンをクリックするたびに、5件ずつ表示されていく
②チェックボックスでのソート
└該当カテゴリの要素が表示され、5件以上ある場合は「もっと見る」ボタンを表示
└「もっと見るボタン」を押すと該当カテゴリの要素が5件ずつ表示される
というのを実装したいです。
発生している問題
①「もっと見る」ボタン用のJSの記述で実装ができた
②ソート用のJSの記述で実装ができた
→①と②を合わせると、ソートがうまく機能しない。
→また、ソートしたあと「もっと見る」を押すと、すべての要素が表示されてしまう
上手いことできないかと模索しているのですが、お分かりの方が居ましたらご教授いただけると幸いです。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>jQuery_sample</title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7</head> 8<body> 9 10<div class="search-box"> 11<input type="checkbox" name="category" value="カテゴリ-01">カテゴリ-01 12<input type="checkbox" name="category" value="カテゴリ-02">カテゴリ-02 13<input type="checkbox" name="category" value="カテゴリ-03">カテゴリ-03 14<input type="checkbox" name="category" value="カテゴリ-04">カテゴリ-04 15<input type="checkbox" name="category" value="カテゴリ-05">カテゴリ-05 16<input type="checkbox" name="category" value="カテゴリ-06">カテゴリ-06 17<input type="checkbox" name="category" value="カテゴリ-07">カテゴリ-07 18<input type="checkbox" name="category" value="カテゴリ-08">カテゴリ-08 19<input type="checkbox" name="category" value="カテゴリ-09">カテゴリ-09 20<input type="checkbox" name="category" value="カテゴリ-10">カテゴリ-10 21<input type="checkbox" name="category" value="カテゴリ-11">カテゴリ-11 22<input type="checkbox" name="category" value="カテゴリ-12">カテゴリ-12 23<input type="checkbox" name="category" value="カテゴリ-13">カテゴリ-13 24<input type="checkbox" name="category" value="カテゴリ-14">カテゴリ-14 25<input type="checkbox" name="category" value="カテゴリ-15">カテゴリ-15 26<input type="checkbox" name="category" value="カテゴリ-16">カテゴリ-16 27<input type="checkbox" name="category" value="カテゴリ-17">カテゴリ-17 28<input type="checkbox" name="category" value="カテゴリ-18">カテゴリ-18 29<input type="checkbox" name="category" value="カテゴリ-19">カテゴリ-19 30<input type="checkbox" name="category" value="カテゴリ-20">カテゴリ-20 31</div> 32 33<ul class="list" id="number_list"> 34<li class="list_item" data-category='["カテゴリ-13", "カテゴリ-16"]'>Category: カテゴリ-13, カテゴリ-16</li> 35<li class="list_item" data-category='["カテゴリ-14"]'>Category: カテゴリ-14</li> 36<li class="list_item" data-category='["カテゴリ-06", "カテゴリ-19"]'>Category: カテゴリ-06, カテゴリ-19</li> 37<li class="list_item" data-category='["カテゴリ-02", "カテゴリ-10"]'>Category: カテゴリ-02, カテゴリ-10</li> 38<li class="list_item" data-category='["カテゴリ-17", "カテゴリ-20"]'>Category: カテゴリ-17, カテゴリ-20</li> 39<li class="list_item" data-category='["カテゴリ-05"]'>Category: カテゴリ-05</li> 40<li class="list_item" data-category='["カテゴリ-05", "カテゴリ-18"]'>Category: カテゴリ-05, カテゴリ-18</li> 41<li class="list_item" data-category='["カテゴリ-01", "カテゴリ-14"]'>Category: カテゴリ-01, カテゴリ-14</li> 42<li class="list_item" data-category='["カテゴリ-08"]'>Category: カテゴリ-08</li> 43<li class="list_item" data-category='["カテゴリ-05", "カテゴリ-07", "カテゴリ-09", "カテゴリ-17"]'>Category: カテゴリ-05, カテゴリ-07, カテゴリ-09, カテゴリ-17</li> 44<li class="list_item" data-category='["カテゴリ-12"]'>Category: カテゴリ-12</li> 45<li class="list_item" data-category='["カテゴリ-03"]'>Category: カテゴリ-03</li> 46<li class="list_item" data-category='カテゴリ-11'>Category: カテゴリ-11</li> 47<li class="list_item" data-category='["カテゴリ-15", "カテゴリ-04"]'>Category: カテゴリ-15,カテゴリ-04</li> 48</ul> 49<button type=button id="more_btn">もっと見る</button> 50 51</body> 52</html>
JQuery
1//もっと見る 2var listContents = $("#number_list li").length; 3$("#number_list").each(function(){ 4 var Num = 10, //最初の表示件数 5 gtNum = Num-1; 6 $(this).find('#more_btn').show(); 7 $(this).find("li:not(:lt("+Num+"))").hide(); 8 $('#more_btn').click(function(){ 9 Num +=5; //5個ずつ追加 10 $(this).parent().find("li:lt("+Num+")").slideDown(); 11 if(listContents <= Num){ 12 $('#more_btn').hide(); 13 } 14 }); 15 16 //ソート 17 $(document).on('change', searchBox + ' input', function() { 18 search_filter(); 19 }); 20}); 21 22/*** リストの絞り込みを行う*/ 23function search_filter() { 24 $(listItem).removeClass(hideClass); 25 for (var i = 0; i < $(searchBox).length; i++) { 26 var name = $(searchBox).eq(i).find('input').attr('name'); 27 var searchData = get_selected_input_items(name); 28 if(searchData.length === 0 || searchData[0] === '') { 29 continue; 30 } 31 for (var j = 0; j < $(listItem).length; j++) { 32 var itemData = get_setting_values_in_item($(listItem).eq(j), name); 33 var check = array_match_check(itemData, searchData); 34 if(!check) { 35 $(listItem).eq(j).addClass(hideClass); 36 } 37 } 38 } 39} 40 41/*** inputで選択されている値の一覧を取得する 42* @param{String} name 対象にするinputのname属性の値 43* @return {Array} 選択されているinputのvalue属性の値 44*/ 45function get_selected_input_items(name) { 46 var searchData = []; 47 $('[name=' + name + ']:checked').each(function() { 48 searchData.push($(this).val()); 49 }); 50 return searchData; 51} 52 53/*** リスト内のアイテムに設定している値の一覧を取得する 54* @param{Object} target 対象にするアイテムのjQueryオブジェクト 55* @param{String} data 対象にするアイテムのdata属性の名前 56* @return {Array} 対象にするアイテムのdata属性の値 57*/ 58function get_setting_values_in_item(target, data) { 59 var itemData = target.data(data); 60 if(!Array.isArray(itemData)) { 61 itemData = [itemData]; 62 } 63 return itemData; 64} 65 66/*** 2つの配列内で一致する文字列があるかどうかを調べる 67* @param{Array} arr1 調べる配列1 68* @param{Array} arr2 調べる配列2 69* @return {Boolean}一致する値があるかどうか 70*/ 71function array_match_check(arr1, arr2) { 72 var arrCheck = false; 73 for (var i = 0; i < arr1.length; i++) { 74 if(arr2.indexOf(arr1[i]) >= 0) { 75 arrCheck = true; 76 break; 77 } 78 } 79 return arrCheck; 80}
CSS
1.is-hide { 2display: none; 3}
追加というと、どういうことでしょうか…？
あれ？
idにnumber_listを設定しているからてっきり、innerHTMLにHTMLを追加する方法を知ってると思ってた。
https://qiita.com/azusanakano/items/f16c3f7333be826dbcdf
上記の参考にしたらいいと思います。
ありがとうございます。
全体的に記述はこちらを参考にしたものでした。
https://qiita.com/33yuki/items/00d9dfa928f3ad0fb2ed
innerHTMLでの追加方法はわかるのですが、それをどうすれば（どう使っていけば）良いのかがわからず…。
単純にjQuery側ででHTMLを書いて、+=で文字列追加を行えば表示されるよ。こんな感じだね。
ただしstr1とstr2は文字列である事。
innerHTML += '<li class="list_item" data-category="' + str1 + '">' + str2 + '<li>';
遅くなってすみません。
お教えいただいた方法で解決できました！ありがとうございました。
纏めになるけど、投稿しておきましたので質問の閉鎖をお願い致します。
回答1件
0
ベストアンサー
<ul class="list" id="number_list">に追加していくような形でいいと思います。
単純にjQuery側ででHTMLを書いて、+=で文字列追加を行えば表示されるよ。こんな感じです。
ただしstr1とstr2は文字列である事。 innerHTML += '<li class="list_item" data-category="' + str1 + '">' + str2 + '<li>';
投稿2019/05/08 06:21
総合スコア3307
あなたの回答
tips
プレビュー
