絞り込みと「もっと見る」ボタンを併用(javascript)

勉強し始めたばかりの手探り状態の為、どう直せばいいのかわからず詰まっています…
どなたか知恵をお貸しください…何卒よろしくお願いいたします。

前提・実現したいこと

⑴　絞り込み機能で「全表示(ALL)」を選択時のみ「もっと見る」と「表示数を戻す(閉じる)」ボタンが表示
⑵　「全表示(ALL)」は初期選択状態
⑶　記事の初期表示は10件
⑷　全ての記事が10件に達していない場合「もっと見る」ボタンは非表示
⑸　「もっと見る」ボタンを押すと5件ずつ追加表示
⑹　全ての記事を表示し終えたら「表示数を戻す(閉じる)」ボタンが表示

発生している問題・エラーメッセージ

絞り込み機能と、ボタンの表示はなんとかできましたが、

絞り込み機能で「全表示(ALL)」を選択時のみ「もっと見る」と「表示数を戻す(閉じる)」ボタンが表示
全ての記事が10件に達していない場合「もっと見る」ボタンは非表示

ができませんでした。

現状、「全表示(ALL)」以外のカテゴリーを選択しても「もっと見る」と「表示数を戻す(閉じる)」ボタンが表示されてしまい
ボタンを押すと、全ての記事が表示されてしまいます。

該当のソースコード

html
1<div id="page works-main">
2　<div class="search searchList categories">
3　　<span class="search_item is-active" data-group="">ALL</span>
4　　<span class="search_item" data-group="a">A</span>
5　　<span class="search_item" data-group="b">B</span>
6　　<span class="search_item" data-group="c">C</span>
7　　<span class="search_item" data-group="d">D</span>
8　　<span class="search_item" data-group="e">E</span>
9　</div>
10
11　<div id="entry_list_more" id="gallery">
12
13　　<!-- /記事一覧 --> 
14    <ul class="list">
15　　　<li class="list_item" data-group="a">1件目の記事</li>
16　　　<li class="list_item" data-group="a">2件目の記事</li>
17　　　<li class="list_item" data-group="a">3件目の記事</li>
18　　　<li class="list_item" data-group="a">4件目の記事</li>
19　　　<li class="list_item" data-group="b">5件目の記事</li>
20　　　<li class="list_item" data-group="b">6件目の記事</li>
21　　　<li class="list_item" data-group="b">7件目の記事</li>
22　　　<li class="list_item" data-group="b">8件目の記事</li>
23　　　<li class="list_item" data-group="b">9件目の記事</li>
24　　　<li class="list_item" data-group="c">10件目の記事</li>
25　　　<li class="list_item" data-group="d">11件目の記事</li>
26　　　<li class="list_item" data-group="d">12件目の記事</li>
27　　　<li class="list_item" data-group="d">13件目の記事</li>
28　　　<li class="list_item" data-group="d">14件目の記事</li>
29　　　<li class="list_item" data-group="e">15件目の記事</li>
30　　　<li class="list_item" data-group="e">16件目の記事</li>
31　　　<li class="list_item" data-group="e">17件目の記事</li>
32
33    </ul>        
34　　　<div id="more_btn">もっと見る <i class="fa fa-chevron-down" aria-hidden="true"></i></div>
35　　　<div id="close_btn">表示数を戻す <i class="fa fa-chevron-up" aria-hidden="true"></i></div> 
36                    
37</div>

javascript
1
2<script>
3　var searchItem = '.search_item';  
4　var listItem = '.list_item';       
5　var hideClass = 'is-hide';         
6　var activeClass = 'is-active';    
7
8　$(function() {
9    $(searchItem).on('click', function() {
10        $(searchItem).removeClass(activeClass);
11        var group = $(this).addClass(activeClass).data('group');
12        search_filter(group);
13    });
14　});
15
16　function search_filter(group) {
17  　$(listItem).removeClass(hideClass);
18    // 値が空の場合はすべて表示
19    if(group === '') {
20        return;
21    }
22    for (var i = 0; i < $(listItem).length; i++) {
23        var itemData = $(listItem).eq(i).data('group');
24        if(itemData !== group) {
25            $(listItem).eq(i).addClass(hideClass);
26      }
27    }
28　}       
29        
30</script>
31
32
33<script>
34var listContents = $("#works_list_more li").length;
35$("#works_list_more").each(function(){
36
37var Num = 10;
38
39$(this).find('#more_btn').show();
40$(this).find('#close_btn').hide();
41$(this).find("li:not(:lt("+Num+"))").hide();
42
43
44$('#more_btn').click(function(){
45Num +=5;
46$(this).parent().find("li:lt("+Num+")").slideDown();
47
48
49if(listContents <= Num){
50Num = 10;
51gtNum = Num-1;
52$('#more_btn').hide();
53$('#close_btn').show();
54
55$('#close_btn').click(function(){
56$(this).parent().find("li:gt("+gtNum+")").slideUp();
57$(this).hide();
58$('#more_btn').show();
59});
60}
61});
62});
63

-----以下追記------

CSS
1
2/* 基本設定 */
3
4#works {
5  display: flex;
6  flex-wrap: wrap;
7  justify-content: space-between;
8  margin: 0 auto;
9  text-align: center;
10}
11
12/* カテゴリー分け部分 */
13
14.search_item {
15    display: inline-block;
16    cursor: pointer;
17    background: #7bc3d1;
18	color: #fff;
19	padding: 5px 12px;
20    margin: 0px 5px;
21    border-radius: 25px;
22}
23.search_item.is-active {
24    color: white;
25    background-color: black;
26}
27.search_item:hover {
28  opacity: 0.6;
29  transition-duration: 0.3s;
30}
31
32.is-hide {
33    display: none;
34}
35
36#page {
37	width: 1380px;
38	margin: 0 auto;
39}
40
41.searchList {
42	margin-bottom: 20px;    
43}
44
45
46.list {
47	overflow: hidden;
48    justify-content: center
49}
50.list li {
51	float: left;
52	width: 19%;
53	margin: 0px 5px 10px 5px;
54}
55
56
57#more {
58	display: none;
59}
60
61#more_btn, #close_btn {
62    background-color: #7bc3d1;
63    color: #fff;
64    border: none;
65    cursor: pointer;
66    outline: none;
67    padding: 0;
68    height: 32px;
69    line-height: 32px;
70    width: 120px;
71    border-radius: 16px;
72    text-align: center;
73    margin: 0 auto;
74    margin-top: 35px;
75    z-index: 1;
76    clear: left;
77}
78
79.categories {
80	padding-bottom: 20px;
81    padding-top: 10px;
82	text-align: center;
83}
84.works-main {
85  display: flex;
86  flex-wrap: wrap;
87}

miyabi_pudding

2020/01/20 00:43

jQueryの質問タグも入れた方がいいかもです。

yureighost

2020/01/20 01:11

差し支えなければCSSソースも貼ってください。表示部分にCSSが影響してますので、この部分だけだと動作させることができません。

solla

2020/01/20 14:09

miyabi_takatsukさん、yureighostさんご指摘いただきありがとうございます。追記致しました。

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

回答1件

ベストアンサー

絞り込み機能で「全表示(ALL)」を選択時のみ「もっと見る」と「表示数を戻す(閉じる)」ボタンが表示全ての記事が10件に達していない場合「もっと見る」ボタンは非表示ができませんでした。

2個目のスクリプトタグ内のID名がミスしてるかと。。。
works_list_more　➡　entry_list_more　（2か所）

この修正で、もっと見るボタンを押す毎に、5件ずつ表示されてきます。

あと何点か修正しました。
以下のコードで動作すると思います。
CSSがなかったので、is-hideクラスだけ、補いました。
絞り込み後のデータ件数が10件以上だった場合は考慮してません。

html
1<html>
2    <head>
3        <!--jQueryソース-->
4        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
5    </head>
6
7    <!--最低限のCSS-->
8    <style>
9        .is-hide{
10            display: none;
11        }
12        .is-active{
13            color: red;
14        }
15    </style>
16
17    <body>
18        <div id="page works-main">
19            　<div class="search searchList categories">
20            　　<span class="search_item is-active" data-group="">ALL</span>
21            　　<span class="search_item" data-group="a">A</span>
22            　　<span class="search_item" data-group="b">B</span>
23            　　<span class="search_item" data-group="c">C</span>
24            　　<span class="search_item" data-group="d">D</span>
25            　　<span class="search_item" data-group="e">E</span>
26            　</div>
27            
28            　<div id="entry_list_more" id="gallery">
29            　　<!-- /記事一覧 --> 
30                <ul class="list">
31            　　　<li class="list_item" data-group="a">1件目の記事</li>
32            　　　<li class="list_item" data-group="a">2件目の記事</li>
33            　　　<li class="list_item" data-group="a">3件目の記事</li>
34            　　　<li class="list_item" data-group="a">4件目の記事</li>
35            　　　<li class="list_item" data-group="b">5件目の記事</li>
36            　　　<li class="list_item" data-group="b">6件目の記事</li>
37            　　　<li class="list_item" data-group="b">7件目の記事</li>
38            　　　<li class="list_item" data-group="b">8件目の記事</li>
39            　　　<li class="list_item" data-group="b">9件目の記事</li>
40            　　　<li class="list_item" data-group="c">10件目の記事</li>
41            　　　<li class="list_item" data-group="d">11件目の記事</li>
42            　　　<li class="list_item" data-group="d">12件目の記事</li>
43            　　　<li class="list_item" data-group="d">13件目の記事</li>
44            　　　<li class="list_item" data-group="d">14件目の記事</li>
45            　　　<li class="list_item" data-group="e">15件目の記事</li>
46            　　　<li class="list_item" data-group="e">16件目の記事</li>
47            　　　<li class="list_item" data-group="e">17件目の記事</li>
48                </ul>        
49            　　　<div id="more_btn">もっと見る <i class="fa fa-chevron-down" aria-hidden="true"></i></div>
50            　　　<div id="close_btn">表示数を戻す <i class="fa fa-chevron-up" aria-hidden="true"></i></div> 
51            </div>
52    </body>
53</html>
54
55<script>
56    　var searchItem = '.search_item';  
57    　var listItem = '.list_item';       
58    　var hideClass = 'is-hide';         
59    　var activeClass = 'is-active';    
60    
61    　$(function() {
62        $(searchItem).on('click', function() {
63            $(searchItem).removeClass(hideClass); //hideclassを削除
64            $('.list_item').css('display',''); //すべて表示
65            
66            $(searchItem).removeClass(activeClass);
67            var group = $(this).addClass(activeClass).data('group');
68            if(group==""){ //ALL選択時はData属性は空白
69                startUp() //初期表示に戻す
70            }else{
71                search_filter(group); //絞り込み
72                //ボタン非表示
73                $('#more_btn').hide();
74                $('#close_btn').hide();
75            }
76        });
77    　});
78    
79    　function search_filter(group) {
80      　$(listItem).removeClass(hideClass);
81        // 値が空の場合はすべて表示
82        if(group === '') {
83            return;
84        }
85        for (var i = 0; i < $(listItem).length; i++) {
86            var itemData = $(listItem).eq(i).data('group');
87            if(itemData !== group) {
88                $(listItem).eq(i).addClass(hideClass);
89            }
90        }
91    　}       
92
93</script>
94<script>
95    var listContents = $("#entry_list_more li").length; //ID名のミス
96    startUp() //初期表示
97
98    //初期表示時とALL再選択されたときに実行
99    function startUp(){
100        $("#entry_list_more").each(function(){ //ID名のミス
101            var Num = 10;
102            if(listContents > 10){
103                $(this).find('#more_btn').show();
104            }else{
105                $(this).find('#more_btn').hide();
106            }
107            $(this).find('#close_btn').hide();
108            $(this).find("li:not(:lt("+Num+"))").hide();
109            
110            $('#more_btn').click(function(){
111                Num +=5;
112                $(this).parent().find("li:lt("+Num+")").slideDown();
113                
114                if(listContents <= Num){
115                    Num = 10;
116                    gtNum = Num-1;
117                    $('#more_btn').hide();
118                    $('#close_btn').show();
119                    
120                    $('#close_btn').click(function(){
121                        $(this).parent().find("li:gt("+gtNum+")").slideUp();
122                        $(this).hide();
123                        $('#more_btn').show();
124                    });
125                }
126            });
127        });
128    }
129</script>

###追記

他のカテゴリーを選択してから「全表示(ALL)」を選択すると

初期表示10件になるところ、表示する数が１～２件程になってしまいます。

ミスしてました。
searchItemのクリックイベント内の最初の行を修正してください。
removeClassの対象を間違えてました。
~~$(searchItem).removeClass(hideClass);~~
$(listItem).removeClass(hideClass);

以下、修正後のクリックイベントのコード

JavaScript
1    　$(function() {
2        $(searchItem).on('click', function() {
3            $(listItem).removeClass(hideClass); //hideclassを削除
4            $('.list_item').css('display',''); //すべて表示
5
6            $(searchItem).removeClass(activeClass);
7            var group = $(this).addClass(activeClass).data('group');
8            if(group==""){ //ALL選択時はData属性は空白
9                startUp() //初期表示に戻す
10            }else{
11                search_filter(group); //絞り込み
12                //ボタン非表示
13                $('#more_btn').hide();
14                $('#close_btn').hide();
15            }
16        });
17    　});

投稿2020/01/20 03:44

編集2020/01/21 00:43

KazuSaka

総合スコア640

solla

2020/01/20 15:46

KazuSakaさんご回答頂きありがとうございます記述の修正・追加を行い・絞り込み機能で「全表示(ALL)」を選択時のみ「もっと見る」と「表示数を戻す(閉じる)」ボタンが表示・表示全ての記事が10件に達していない場合「もっと見る」ボタンは非表示・もっと見るボタンを押す毎に、5件ずつ表示は解消したのですが、他のカテゴリーを選択してから「全表示(ALL)」を選択すると初期表示10件になるところ、表示する数が１～２件程になってしまいます。「もっと見る」ボタンを押し続けるとすべての記事(17件分)は表示されます。どうすれば良いでしょうか。。何度も申し訳ありませんがよろしくお願いいたします、、