前提・実現したいこと

https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
↑の３を使用してソートするリストを作成したのですが、
選択がない状態に戻った際、最初に表示されているのと同じく、項目を最初の4件までの表示にしたいです。

・項目、タグのand検索をする
・項目、タグがひとつも選択されていない状態のとき（最初にページを開いた状態含）は、上位4つの中身のみを表示し、あとは「続きを見る」ボタンを表示させる
→「続きを見る」ボタンを押すと残りの中身が2個ずつ表示されていく

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
7</head>
8<body>
9
10	<ul class="search-box">
11		<li>
12			<label><input type="checkbox" name="koumoku" id="koumoku1" value="koumoku1" />項目1</label>
13		</li>
14		<li>
15			<label><input type="checkbox" name="koumoku" id="koumoku2" value="koumoku2" />項目2</label>
16		</li>
17		<li>
18			<label><input type="checkbox" name="koumoku" id="koumoku3" value="koumoku3" />項目3</label>
19		</li>
20		<li>
21			<label><input type="checkbox" name="koumoku" id="koumoku4" value="koumoku4" />項目4</label>
22		</li>
23		<li>
24			<label><input type="checkbox" name="koumoku" id="koumoku5" value="koumoku5" />項目5</label>
25		</li>
26	</ul>
27	<ul class="search-box">
28		<li>
29			<label for="tag1" class="tag"><input type="checkbox" name="tag" id="tag1" value="tag1" />タグ1</label>
30		</li>
31		<li>
32			<label for="tag2" class="tag"><input type="checkbox" name="tag" id="tag2" value="tag2" />タグ2</label>
33		</li>
34		<li>
35			<label for="tag3" class="tag"><input type="checkbox" name="tag" id="tag3" value="tag3" />タグ3</label>
36		</li>
37		<li>
38			<label for="tag4" class="tag"><input type="checkbox" name="tag" id="tag4" value="tag4" />タグ4</label>
39		</li>
40		<li>
41			<label for="tag5" class="tag"><input type="checkbox" name="tag" id="tag5" value="tag5" />タグ5</label>
42		</li>
43	</ul>
44
45	<div class="contents">
46		<ul class="flex" id="searchList">
47			<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>
48				中身
49				項目：1、タグ1,タグ2
50			</li>
51			<li data-koumoku='koumoku2' data-tag='["tag2"]'>
52				中身
53				項目：2、タグ2
54			</li>
55			<li data-koumoku='koumoku3' data-tag='["tag3"]'>
56				中身
57				項目：3、タグ3
58			</li>
59			<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>
60				中身
61				項目：4、タグ4,タグ2
62			</li>
63			<li data-koumoku='koumoku5' data-tag='["tag5"]'>
64				中身
65				項目：5、タグ5
66			</li>
67			<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>
68				中身
69				項目：1、タグ1,タグ2
70			</li>
71			<li data-koumoku='koumoku2' data-tag='["tag2"]'>
72				中身
73				項目：2、タグ2
74			</li>
75			<li data-koumoku='koumoku3' data-tag='["tag3"]'>
76				中身
77				項目：3、タグ3
78			</li>
79			<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>
80				中身
81				項目：4、タグ4,タグ2
82			</li>
83			<li data-koumoku='koumoku5' data-tag='["tag5"]'>
84				中身
85				項目：5、タグ5
86			</li>
87		</ul>
88		<div id="moreBtn">続きを表示</div>
89	</div>
90</body></html>

jQuery
1
2var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
3var listItem = '#searchList li'; // 絞り込み対象のアイテム
4var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名
5
6$(function() {
7	$(document).on('change', searchBox + ' input', function() {
8		search_filter();
9	});
10});
11/* リストの絞り込みを行う */
12function search_filter() {
13	// 非表示状態を解除
14	$(listItem).removeClass(hideClass);
15	for (var i = 0; i < $(searchBox).length; i++) {
16		var name = $(searchBox).eq(i).find('input').attr('name');
17		// 選択されている項目を取得
18		var searchData = get_selected_input_items(name);
19		if(searchData.length === 0 || searchData[0] === '') {
20			continue;
21		}
22		// リスト内の各アイテムをチェック
23		for (var j = 0; j < $(listItem).length; j++) {
24			// アイテムに設定している項目を取得
25			var itemData = get_setting_values_in_item($(listItem).eq(j), name);
26			// 絞り込み対象かどうかを調べる
27			var check = array_match_check(itemData, searchData);
28			if(!check) {
29				$(listItem).eq(j).addClass(hideClass);
30			}
31		}
32	}
33}
34/* inputで選択されている値の一覧を取得する
35* @param{String} name 対象にするinputのname属性の値
36* @return {Array} 選択されているinputのvalue属性の値 */
37function get_selected_input_items(name) {
38	var searchData = [];
39	$('[name=' + name + ']:checked').each(function() {
40		searchData.push($(this).val());
41	});
42	return searchData;
43}
44/* リスト内のアイテムに設定している値の一覧を取得する
45* @param{Object} target 対象にするアイテムのjQueryオブジェクト
46* @param{String} data 対象にするアイテムのdata属性の名前
47* @return {Array} 対象にするアイテムのdata属性の値 */
48function get_setting_values_in_item(target, data) {
49	var itemData = target.data(data);
50	if(!Array.isArray(itemData)) {
51		itemData = [itemData];
52	}
53	return itemData;
54}
55/* 2つの配列内で一致する文字列があるかどうかを調べる
56* @param{Array} arr1 調べる配列1
57* @param{Array} arr2 調べる配列2
58* @return {Boolean}一致する値があるかどうか */
59function array_match_check(arr1, arr2) {
60	// 絞り込み対象かどうかを調べる
61	var arrCheck = false;
62	for (var i = 0; i < arr1.length; i++) {
63		if(arr2.indexOf(arr1[i]) >= 0) {
64			arrCheck = true;
65			break;
66		}
67	}
68	return arrCheck;
69}
70// 項目件数表示設定　//
71var serchList = $("#searchList li").length;
72$('#searchList').each(function(){
73	//最初に表示させるアイテムの数
74	var Num = 4,
75	gtNum = Num-1;
76	//最初はmoreボタン表示にし、
77	$('#searchList').find('#moreBtn').removeClass('is-hide');
78	//10行目まで表示
79	$('#searchList').find("li:not(:lt("+Num+"))").addClass('is-hide');
80	//moreボタンがクリックされた時
81	$('#moreBtn').click(function(){
82		Num +=2;
83		$(this).parent().find("li:lt("+Num+")").fadeIn();
84		//liの個数よりNumが多い時、
85		if(serchList <= Num){
86			$('#moreBtn').hide();
87		}
88	});
89});

CSS
1.is-hide {
2	display: none;
3}

試したこと

jQuery内の「if(searchData.length === 0 || searchData[0] === '') {～}」部分に項目件数表示設定を追加すれば良いのかなと思ったのですが、うまく動作しませんでした。
どの部分にどう追加すればよいのでしょうか…？

yambejp

2019/05/09 00:45 編集

結局なにがしたいのかわかりません項目、タグのand検索をして表示対象が5つ以上あったら上位4つを表示するのですか？「ALLを選択している場合」とはなんでしょう？「ALL」に当たる要素がありませんまた、ひとつもチェックされていないときは中身項目は一つも表示しないのですよね？続きを表示はクリックすると全部表示されるのでしょうか？ 4個ずつ増えていくのでしょうか？

a2s

2019/05/09 00:52

>「ALLを選択している場合」とはなんでしょう？「ALL」に当たる要素がありません失礼しました。参考サイトのソースをそのまま使用していたので、残った状態になっていました。「ALL」はありません。また、実現したいことに詳細を追記いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

項目4にタグ4とありますが実際に入っているのはtag1ですね
続きを読むはとりあえずおいておいて、挙動はこれであっていますか？

javascirpt
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function() {
4  $('.search-box input').on('change',function(){
5    var k=$('.search-box [name=koumoku]:checked').map(function(){
6      return $(this).val();
7    }).get();
8    var t=$('.search-box [name=tag]:checked').map(function(){
9      return $(this).val();
10    }).get();
11    $('#searchList li').hide().filter(function(){
12      var flg_t=(k.length==0)?true:$.inArray($(this).data('koumoku'),k)>=0;
13      var flg_k=(t.length==0)?true:$(this).data('tag').some(function(x){return $.inArray(x,t)>=0;});
14      return flg_t && flg_k;
15    }).show();
16  }).eq(0).trigger('change');
17});
18</script>
19<ul class="search-box">
20<li>
21<label><input type="checkbox" name="koumoku" id="koumoku1" value="koumoku1" />項目1</label></li>
22<li><label><input type="checkbox" name="koumoku" id="koumoku2" value="koumoku2" />項目2</label></li>
23<li><label><input type="checkbox" name="koumoku" id="koumoku3" value="koumoku3" />項目3</label></li>
24<li><label><input type="checkbox" name="koumoku" id="koumoku4" value="koumoku4" />項目4</label></li>
25<li><label><input type="checkbox" name="koumoku" id="koumoku5" value="koumoku5" />項目5</label></li>
26</ul>
27<ul class="search-box">
28<li><label for="tag1" class="tag"><input type="checkbox" name="tag" id="tag1" value="tag1" />タグ1</label></li>
29<li><label for="tag2" class="tag"><input type="checkbox" name="tag" id="tag2" value="tag2" />タグ2</label></li>
30<li><label for="tag3" class="tag"><input type="checkbox" name="tag" id="tag3" value="tag3" />タグ3</label></li>
31<li><label for="tag4" class="tag"><input type="checkbox" name="tag" id="tag4" value="tag4" />タグ4</label></li>
32<li><label for="tag5" class="tag"><input type="checkbox" name="tag" id="tag5" value="tag5" />タグ5</label></li>
33</ul>
34
35<div class="contents">
36<ul class="flex" id="searchList">
37<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身1 項目：1、タグ1,タグ2</li>
38<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身2 項目：2、タグ2</li>
39<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身3 項目：3、タグ3</li>
40<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身4 項目：4、タグ4,タグ2</li>
41<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身5 項目：5、タグ5</li>
42<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身6 項目：1、タグ1,タグ2</li>
43<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身7 項目：2、タグ2</li>
44<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身8 項目：3、タグ3</li>
45<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身9 項目：4、タグ4,タグ2</li>
46<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身10 項目：5、タグ5</li>
47</ul>
48<div id="moreBtn">続きを表示</div>
49</div>

続きを表示

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3var view_length_default = 4;
4var view_length_add = 2;
5$(function() {
6  $('.search-box input').on('change',function(){
7    view(view_length_default);
8  }).eq(0).trigger('change');
9  $('#moreBtn').on('click',function(){
10    view($('#searchList li:visible').length+view_length_add);
11  });
12  function view(view_length){
13    var k=$('.search-box [name=koumoku]:checked').map(function(){
14      return $(this).val();
15    }).get();
16    var t=$('.search-box [name=tag]:checked').map(function(){
17      return $(this).val();
18    }).get();
19    var ele=$('#searchList li').hide().filter(function(){
20      var flg_t=(k.length==0)?true:$.inArray($(this).data('koumoku'),k)>=0;
21      var flg_k=(t.length==0)?true:$(this).data('tag').some(function(x){return $.inArray(x,t)>=0;});
22      return flg_t && flg_k;
23    });
24    ele.filter(':lt('+view_length+')').show();
25    $('#moreBtn').toggle(ele.length>view_length);
26  }
27});
28</script>
29<ul class="search-box">
30<li>
31<label><input type="checkbox" name="koumoku" id="koumoku1" value="koumoku1" />項目1</label></li>
32<li><label><input type="checkbox" name="koumoku" id="koumoku2" value="koumoku2" />項目2</label></li>
33<li><label><input type="checkbox" name="koumoku" id="koumoku3" value="koumoku3" />項目3</label></li>
34<li><label><input type="checkbox" name="koumoku" id="koumoku4" value="koumoku4" />項目4</label></li>
35<li><label><input type="checkbox" name="koumoku" id="koumoku5" value="koumoku5" />項目5</label></li>
36</ul>
37<ul class="search-box">
38<li><label for="tag1" class="tag"><input type="checkbox" name="tag" id="tag1" value="tag1" />タグ1</label></li>
39<li><label for="tag2" class="tag"><input type="checkbox" name="tag" id="tag2" value="tag2" />タグ2</label></li>
40<li><label for="tag3" class="tag"><input type="checkbox" name="tag" id="tag3" value="tag3" />タグ3</label></li>
41<li><label for="tag4" class="tag"><input type="checkbox" name="tag" id="tag4" value="tag4" />タグ4</label></li>
42<li><label for="tag5" class="tag"><input type="checkbox" name="tag" id="tag5" value="tag5" />タグ5</label></li>
43</ul>
44
45<div class="contents">
46<ul class="flex" id="searchList">
47<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身1 項目：1、タグ1,タグ2</li>
48<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身2 項目：2、タグ2</li>
49<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身3 項目：3、タグ3</li>
50<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身4 項目：4、タグ4,タグ2</li>
51<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身5 項目：5、タグ5</li>
52<li data-koumoku='koumoku1' data-tag='["tag1", "tag2"]'>中身6 項目：1、タグ1,タグ2</li>
53<li data-koumoku='koumoku2' data-tag='["tag2"]'>中身7 項目：2、タグ2</li>
54<li data-koumoku='koumoku3' data-tag='["tag3"]'>中身8 項目：3、タグ3</li>
55<li data-koumoku='koumoku4' data-tag='["tag4", "tag2"]'>中身9 項目：4、タグ4,タグ2</li>
56<li data-koumoku='koumoku5' data-tag='["tag5"]'>中身10 項目：5、タグ5</li>
57</ul>
58<div id="moreBtn">続きを表示</div>
59</div>