【タブメニュー】コンテンツをカテゴリーごとにソートして表示【filter編】

ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。
カテゴリーの判別はjQueryのfilterを利用します。

htmlのコードは下記になります。
タブのliタグにはカスタムデータ属性のdata-filter属性でカテゴリー名を付与します。コンテンツのdivタグにはカスタムデータ属性のdata-category属性でカテゴリー名を付与します。jQueryのfilterを利用したカテゴリーのソートは、このそれぞれのカスタムデータ属性の値の一致が条件となります。jQueryのhasClassは利用しないため、タブのliタグにカテゴリーのクラス名は付与しません。

<ul class="news_link">
	<li class="active" data-filter="catAll">すべて</li>
	<li data-filter="catInfo">お知らせ</li>
	<li data-filter="catEvent">イベント</li>
	<li data-filter="catRecruit">採用</li>
</ul>

<div class="news-content" data-category="catEvent">
	<p class="news-date">2019/07/24</p>
	<p class="tags">イベント</p>
	<p class="news-r"><a href="#">イベント情報01:ダミーテキストダミーテキスト</a></p>
</div>
<div class="news-content" data-category="catRecruit">
	<p class="news-date">2019/07/11</p>
	<p class="tags">採用情報</p>
	<p class="news-r"><a href="#">採用情報01:ダミーテキストダミーテキスト</a></p>
</div>
<div class="news-content" data-category="catInfo">
	<p class="news-date">2019/07/02</p>
	<p class="tags">お知らせ</p>
	<p class="news-r"><a href="#">お知らせ01:ダミーテキストダミーテキスト</a></p>
</div>

続いてCSSのコードです。hasClass編と全く同じで、変更はありません。

.news_link {
	display: flex;
	margin: 0 0 35px;
	padding: 0;
	list-style-type: none;
}
.news_link li {
	width: 24.7%;
	margin-left: 2px;
	background: #78909c;
	color: #FFFFFF;
	position: relative;
	padding: 20px 6px 20px;
	cursor: pointer;
	text-align: center;
	line-height: 1;
}
.news_link li:first-child {
	margin-left: 0;
}
.news_link li:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 16px solid #c3d4dc;
	display: none;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
}
.news_link li.active, .news_link li:hover {
	background: #c3d4dc;
	color: #010101;
	font-weight: bold;
}
.news_link li.active:after, .news_link li:hover:after {
	display: block;
}
.news-content {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	margin-bottom: 30px;
}
.news-date {
	font-size: 16px;
	margin-right: 20px;
}
.tags {
	margin-right: 20px;
	background: #c3d4dc;
	min-width: 110px;
	font-size: 14px;
	text-align: center;
	padding: 0 6px;
	height: 35px;
	line-height: 35px;
	color: #000000;
}
.news-content .news-r a {
	color: #000;
	transition: color 0.2s ease-in-out;
}
.news-content .news-r a:hover {
	color: #8bc73f;
	transition: color 0.2s ease-in-out;
}

最後にjQueryのコードです。
ページ表示時はコンテンツを一度全て非表示にし、変数limitの数だけコンテンツを上から順番にフェードインで表示します。ここまではhasClass編と同じです。
タブ切り替え時はまずタブのliタグのclass=”active”を削除し、クリックされたタブのliタグのみにclass=”active”を付与します。次にクリックされたタブのliタグのdata-filter属性の値を調べ、カテゴリーのタブの場合のみ、そのカテゴリーのコンテンツを変数limitの数だけ上から順番にフェードインで表示します。
ここでカテゴリーのソートはjQueryのfilterを利用してしています。ソートの条件は下記の値の一致です。
・クリックされたタブのliタグのdata-filter属性の値
・コンテンツのdivタグのdata-category属性の値

$(function() {
	var newsLink = $(".news_link li");
	var limit = 5;
	$(".news-content").css('display','none');
	for(var i = 0 ; i < limit ; i++) {
		var limitNews = $(".news-content")[i];
		$(limitNews).fadeIn();
	}
	$(newsLink).click(function(){
		$(newsLink).removeClass("active");
		$(this).addClass("active");
		var btnFilter = $(this).attr('data-filter');
		if (btnFilter == 'catAll') {
			$(".news-content").css('display','none');
			for(i = 0 ; i < limit ; i++) {
				limitNews = $(".news-content")[i];
				$(limitNews).fadeIn();
			}
		} else {
			$(".news-content").css('display','none');
			for(i = 0 ; i < limit ; i++) {
				limitNews = $(".news-content").filter('[data-category = "' + btnFilter + '"]')[i];
				$(limitNews).fadeIn();
			}
		}
	});
});
タイトルとURLをコピーしました