jQueryで要素の絞り込みを作成したのですが、もっと見るボタンで要素を徐々に表示したいと考えています。
最初に4つまで表示、もっと見るボタンをクリックで4つずつ下に表示していくという動きを実装したいです。
最初に5つ目以降を非表示にするところまではできたのですが、.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});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/11 08:58
2019/06/12 06:31
2019/06/13 10:22 編集
2019/06/14 07:03
2019/06/17 04:43 編集