jquery フィルタリング絞り込みともっと見るボタンを併用

Question

jqueryで絞り込み機能ともっと見るボタンを併用で設置したいと考えています。

絞り込みの種類⇒全て・新作・再販・予約
もっと見るをクリックで４件ずつ表示

全ての時は４つずつ表示がうまく動作するのですが、
新作・再販・予約をクリックしたときに最初の４件まで表示させることはできるのですが、
もっと見るをクリックで一気に他の分類のものまで全て表示されてしまいます。

またboxesの中身はjsonで取得させる予定です。

解決策はありますか？

<div class="cta filter">
  <a class="tab-name all active" data-filter="all" href="#" role="button">すべて</a>
  <a class="tab-name new-tab" data-filter="new-tab" href="#" role="button">新作</a>
  <a class="tab-name re-tab" data-filter="re-tab" href="#" role="button">再販</a>
  <a class="tab-name booking-tab" data-filter="booking-tab" href="#" role="button">予告と予約</a>
</div>

<div class="boxes">

<!--新作商品-->
<div class="col1 new-tab tab-elm" data-category="new-tab">
<a href="" target="_top" class="block">
<div class="product-img img-col1">
<img src="" alt="">
</div>
<div class="label-wrap">
<p class="img-label new-label">新作</p>
</div>
<p class="price-text">円<span>税込</span></p>
</a>
</div>
<!--新作商品-->

<!--再販商品-->
<div class="col1 re-tab tab-elm" data-category="re-tab">
<a href="" target="_top" class="block">
<div class="product-img img-col1">
<img src="" alt="">
</div>
<div class="label-wrap">
<p class="img-label re-label">再販</p>
</div>
<p class="price-text">円<span>税込</span></p>
</a>
</div>
<!--再販商品-->

<!--予約商品-->
<div class="col1 booking-tab tab-elm" data-category="booking-tab">
<a class="block"  href="">
<div class="product-img img-col1">
<img src="" alt="">
</div>
<div class="label-wrap">
<p class="img-label booking-label">予約</p>
</div>
<p class="price-text">円<span>税込</span></p>
</a>
</div>
<!--予約商品-->

</div>

$(document).ready(function(){
		
		var $filters = $('.filter [data-filter]'),
		$boxes = $('.boxes [data-category]');

		$filters.on('click', function(e) {
		e.preventDefault();
		var $this = $(this);
		$filters.removeClass('active');
		$this.addClass('active');

		var $filterColor = $this.attr('data-filter');

		if ($filterColor == 'all') {
			
			//全てをクリックされたときの処理
			$('.tab-more-btn').remove();
			$boxes.removeClass('is-animated')
			.fadeOut().promise().done(function() {
			$('.boxes [data-category]:lt(4)').addClass('is-animated').fadeIn();
			$('.tab-more-btn:lt(4)').hide();
			$('.tab-elm:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));	
			$(document).on('click','.tab-more-btn',function(){
				$('.tab-elm:visible:lt(4)').addClass('is-animated').fadeIn();
				$('.tab-elm:visible').closest('.boxes').last().after($('.tab-more-btn'));
				if($('.tab-elm:hidden').length==0) $('.tab-more-btn').remove();
			});	
			
		});
			
		} else {
			
			//全て以外をクリックしたときの処理
			$('.tab-more-btn').remove();
			$('.tab-elm:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));		
			$boxes.removeClass('is-animated')
			.fadeOut().promise().done(function() {
			$boxes.filter('[data-category = "' + $filterColor + '"]:lt(4)').addClass('is-animated').fadeIn();
			});

			$(document).on('click','.tab-more-btn',function(){
				$boxes.filter('[data-category = "' + $filterColor + '"]:lt(4)').addClass('is-animated').fadeIn();
				$('.tab-elm:visible').closest('.boxes').last().after($('.tab-more-btn'));
				if($('.tab-elm:hidden').length==0) $('.tab-more-btn').remove();
			});		
				
		}
			
		});
		
		//初期の全て表示されている状態
		$('.tab-elm:gt('+(4-1)+')').hide();
		$('.tab-elm:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));
		$(document).on('click','.tab-more-btn',function(){
			$('.tab-elm:lt('+($('.tab-elm:visible').length+4)+')').show();
			$('.tab-elm:visible').closest('.boxes').last().after($('.tab-more-btn'));
			if($('.tab-elm:hidden').length==0) $('.tab-more-btn').remove();
		});
		
	});
コード

Comments

[m.ts10806]

サンプルデータをご提示ください。

Answer 1

全て・新作・再販・予約の絞り込みをするならラジオボタンなど
データが保持できるものを利用してください

sample

<script>
$(function(){
  $(':radio[name=category]').on('change',function(){
    $('.boxes .tab-elm').hide().filter($(this).val()).show();
  });
});
</script>
<div class="cta filter">
<label><input type="radio" name="category" value="*" checked>すべて</label>
<label><input type="radio" name="category" value=".new-tab">新作</label>
<label><input type="radio" name="category" value=".re-tab">再販</label>
<label><input type="radio" name="category" value=".booking-tab">予告と予約</label>
</div>

<div class="boxes">
<div class="col1 tab-elm new-tab">new1</div>
<div class="col1 tab-elm re-tab">re1</div>
<div class="col1 tab-elm booking-tab">book1</div>
</div>

Comments

[ysfree14]

ありがとうございます。
上記のソースを参考に少し考えてみたのですが、表示させる要素にクラス名「on」をつけて「もっと見る」ボタンで４件ずつ表示させようと思いました。

・最初にすべての状態でもっと見るボタンを設置して４件ずつ表示
・絞り込みで最初の４件まで表示

上記は実装できたのですが、絞り込みで４件まで表示して「もっと見る」を押したときにうまく４件ずつ取得できません。

ご回答いただけますと幸いです。よろしくお願い致します。

$(function(){

//全ての要素に.onをつける
$('.tab-elm').addClass("on");

//.onを4件ずつ表示
$('.on:gt('+(4-1)+')').hide();

//もっと見るボタンを配置
$('.on:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));

//もっと見るボタンの処理
$(document).on('click','.tab-more-btn',function(){
$('.tab-elm:lt('+($('.tab-elm:visible').length+4)+')').addClass("on").show();
$('.on:visible').closest('.boxes').last().after($('.tab-more-btn'));
if($('.on:hidden').length==0) $('.tab-more-btn').remove();
});

//絞り込みをした要素に.onをつけて４件ずつ表示
$(':radio[name=category]').on('change',function(){

//一度もっと見るボタンを消す
$('.tab-more-btn').remove();

//一度全てのtab-elmから.onを消す
$('.tab-elm').removeClass("on");

//絞り込みした要素に.onをつける
$('.boxes .tab-elm').hide().filter($(this).val()).addClass("on").show();

//.onを４件表示
$('.on:gt('+(4-1)+')').hide();

//4件表示の下に「もっと見る」ボタンを配置
$('.on:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));
});

});