jQueryで要素の絞り込みを作成したのですが、もっと見るボタンで要素を徐々に表示したいと考えています。
最初に４つまで表示、もっと見るボタンをクリックで４つずつ下に表示していくという動きを実装したいです。

最初に５つ目以降を非表示にするところまではできたのですが、.tab-nameをクリックしたときに全てが表示されてしまいます。
どのようにすればよいのでしょうか。
よろしくお願い致します。

html
1<div class="cta filter">
2  <a class="tab-name all active" data-filter="all" href="#" role="button">すべて</a>
3  <a class="tab-name new-tab" data-filter="new-tab" href="#" role="button">新作</a>
4  <a class="tab-name re-tab" data-filter="re-tab" href="#" role="button">再販</a>
5  <a class="tab-name booking-tab" data-filter="booking-tab" href="#" role="button">予告と予約</a>
6</div>
7
8<div class="boxes">
9
10<!--新作商品-->
11<div class="col1 new-tab tab-elm" data-category="new-tab">
12<a href="" target="_top" class="block">
13<div class="product-img img-col1">
14<img src="" alt="">
15</div>
16<div class="label-wrap">
17<p class="img-label new-label">新作</p>
18</div>
19<p class="price-text">円<span>税込</span></p>
20</a>
21</div>
22<!--新作商品-->
23
24<!--再販商品-->
25<div class="col1 re-tab tab-elm" data-category="re-tab">
26<a href="" target="_top" class="block">
27<div class="product-img img-col1">
28<img src="" alt="">
29</div>
30<div class="label-wrap">
31<p class="img-label re-label">再販</p>
32</div>
33<p class="price-text">円<span>税込</span></p>
34</a>
35</div>
36<!--再販商品-->
37
38<!--予約商品-->
39<div class="col1 booking-tab tab-elm" data-category="booking-tab">
40<a class="block"  href="">
41<div class="product-img img-col1">
42<img src="" alt="">
43</div>
44<div class="label-wrap">
45<p class="img-label booking-label">予約</p>
46</div>
47<p class="price-text">円<span>税込</span></p>
48</a>
49</div>
50<!--予約商品-->
51
52～～同じコードで続きます。～～
53
54</div>
55
56<div class="tab-more-btn">もっと見る</div>
57

JS
1$(window).on('load',function(){
2		
3$('.boxes .tab-elm:nth-child(n + 5)').hide();
4		
5var $filters = $('.filter [data-filter]'),
6$boxes = $('.boxes [data-category]');
7
8$filters.on('click', function(e) {
9e.preventDefault();
10var $this = $(this);
11$filters.removeClass('active');
12$this.addClass('active');
13$('.boxes .tab-elm:nth-child(n + 5)').hide();
14
15var $filterColor = $this.attr('data-filter');
16
17if ($filterColor == 'all') {
18$boxes.removeClass('is-animated')
19.fadeOut().promise().done(function() {
20$boxes.addClass('is-animated').fadeIn();
21});
22} else {
23$boxes.removeClass('is-animated')
24.fadeOut().promise().done(function() {
25$boxes.filter('[data-category = "' + $filterColor + '"]')
26.addClass('is-animated').fadeIn();
27});
28}
29});
30		
31});

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

回答1件

考え方は２つあります。

全部のデータをもっておいて、4件ずつ順次表示していく

この場合:visibledの数を数えて4足していけばOK

4件だけサーバーからデータをとってきておいて、もっと見るを押すことで0

ajaxでサーバーから4件追加でうけとる。
その場合所定の4県を吐き出してくれるAPIを用意してもらう必要があります。

sample

上記前者ならこんな感じでいけます

javascript
1<script>
2var view=4;
3$(function(){
4  $('.hoge:gt('+(view-1)+')').hide();
5  $('.hoge:visible:last').after($('<div id="more">もっとみる</div>'));
6  $(document).on('click','#more',function(){
7    $('.hoge:lt('+($('.hoge:visible').length+view)+')').show();
8    $('.hoge:visible:last').after($('#more'));
9    if($('.hoge:hidden').length==0) $('#more').remove();
10  });
11});
12</script>
13
14<div class= "hoge">1</div>
15<div class= "hoge">2</div>
16<div class= "hoge">3</div>
17<div class= "hoge">4</div>
18<div class= "hoge">5</div>
19<div class= "hoge">6</div>
20<div class= "hoge">7</div>
21<div class= "hoge">8</div>
22<div class= "hoge">9</div>
23<div class= "hoge">10</div>
24<div class= "hoge">11</div>
25<div class= "hoge">12</div>
26<div class= "hoge">13</div>
27

調整

javascript
1<script>
2var view=4;
3$(function(){
4  $('.tab-elm:gt('+(view-1)+')').hide();
5  $('.tab-elm:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));
6  $(document).on('click','.tab-more-btn',function(){
7    $('.tab-elm:lt('+($('.tab-elm:visible').length+view)+')').show();
8    $('.tab-elm:visible').closest('.boxes').last().after($('.tab-more-btn'));
9    if($('.tab-elm:hidden').length==0) $('.tab-more-btn').remove();
10  });
11});
12</script>
13<div class="boxes">
14<div class= "tab-elm">1</div>
15<div class= "tab-elm">2</div>
16<div class= "tab-elm">3</div>
17<div class= "tab-elm">4</div>
18</div>
19<div class="boxes">
20<div class= "tab-elm">5</div>
21<div class= "tab-elm">6</div>
22<div class= "tab-elm">7</div>
23<div class= "tab-elm">8</div>
24</div>
25<div class="boxes">
26<div class= "tab-elm">9</div>
27<div class= "tab-elm">10</div>
28<div class= "tab-elm">11</div>
29<div class= "tab-elm">12</div>
30</div>
31<div class="boxes">
32<div class= "tab-elm">13</div>
33</div>
34

投稿2019/06/11 06:26

編集2019/06/12 06:30

yambejp

総合スコア114769

ysfree14

2019/06/11 08:58

ありがとうございます。すべてのタブで最初の４つを表示させた場合、新作や再販を押したときにすべてで最初表示した４つのうちから該当のものしか表示されません。 $filters.on('click', function(e) {　の下に $('.tab-elm').show();を追記したのですが、何がいけないのでしょうか？