絞り込みを行っているそれぞれのタブの内容の表示数を調整したいです。

jsを使って、タブで絞り込みを行っているのですが、
それぞれのタブ内の表示件数を３件に調整したいです。

表示する数の調整方法を調べてjsに書いてみたのですが、
ページを読み込んだときはトップの表示件数は３件になるのですが、
別のタブを押して切り替えたとき、
切り替えたほうのタブは表示する数が調整されず、
ページを読み込んだときに表示数が調整されていたタブのほうも
元の件数に戻ってしまいます。

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

該当のソースコード

HTML5
1			<ul class="main-top">
2				<li class="tab_item select"><a href="js-filter-all">すべて</a></li>
3				<li class="tab_item"><a href="js-filter-press">プレス<br class="spOnly">リリース</a></li>
4				<li class="tab_item"><a href="js-filter-topics">トピックス</a></li>
5			</ul>
6			<div id="number_list">
7			<ul class="main-contents">
8				<li class="js-filter-press">
9					<a href="DUMMY">
10					<dl>
11						<dt class="iconPR">2016年11月13日</dt>
12						<dd>テキストテキストテキストテキスト</dd>
13					</dl>
14					</a>
15				</li>
16				<li class="js-filter-topics">
17					<a href="DUMMY">
18					<dl>
19						<dt class="iconTP">2016年11月13日</dt>
20						<dd>テキストテキストテキストテキストテテキストテキストテキストテキスト</dd>
21					</dl>
22					</a>
23				</li>
24				<li class="js-filter-press">
25					<a href="DUMMY">
26					<dl>
27						<dt class="iconPR">2016年11月06日</dt>
28						<dd>テキストテキストテキストテキスト</dd>
29					</dl>
30					</a>
31				</li>
32				<li class="js-filter-press">
33					<a href="DUMMY">
34					<dl>
35						<dt class="iconPR">2015年10月30日</dt>
36						<dd>テキストテキストテキストテキスト</dd>
37					</dl>
38					</a>
39				</li>
40				<li class="js-filter-topics">
41					<a href="DUMMY">
42					<dl>
43						<dt class="iconTP">2015年10月15日</dt>
44						<dd>テキストテキストテキストテキスト</dd>
45					</dl>
46					</a>
47				</li>
48				<li class="js-filter-topics">
49					<a href="DUMMY">
50					<dl>
51						<dt class="iconTP">2015年08月29日</dt>
52						<dd>テキストテキストテキストテキスト</dd>
53					</dl>
54					</a>
55				</li>
56				<li class="js-filter-press">
57					<a href="DUMMY">
58					<dl>
59						<dt class="iconPR">2014年05月15日</dt>
60						<dd>テキストテキストテキストテキスト</dd>
61					</dl>
62					</a>
63				</li>
64				<li class="js-filter-topics">
65					<a href="DUMMY" target="_blank">
66					<dl class="spBlank">
67						<dt class="iconTP">2014年04月13日</dt>
68						<dd class="blankLink">テキストテキストテキストテキスト</dd>
69					</dl>
70					</a>
71				</li>
72				<li class="js-filter-press">
73					<a href="DUMMY" target="_blank">
74					<dl class="spBlank">
75						<dt class="iconPR">2013年03月31日</dt>
76						<dd class="blankLink">テキストテキストテキストテキスト</dd>
77					</dl>
78					</a>
79				</li>
80				<li class="js-filter-press">
81					<a href="DUMMY">
82					<dl>
83						<dt class="iconPR">2013年02月20日</dt>
84						<dd>テキストテキストテキストテキスト</dd>
85					</dl>
86					</a>
87				</li>
88				<li class="js-filter-press">
89					<a href="DUMMY.pdf">
90					<dl class="spPdf">
91						<dt class="iconPR">2012年02月14日</dt>
92						<dd class="pdfLink">テキストテキストテキスト[***KB]</dd>
93					</dl>
94					</a>
95				</li>
96			<!-- cont-txtsp --></ul>
97			</div>

該当のソースコード

JQuery
1
2$(function(){
3	/*----------------
4	 タブ内容の絞込み 
5	------------------*/
6	$('.main-top > li a').click(function(){
7		$('.main-top > li').removeClass('select');
8		$(this).parent('.tab_item').addClass('select'); 
9		var tabBtn = $(this).attr('href');
10		if(tabBtn === 'js-filter-all'){
11			$('.main-contents > li').show();
12		} else{
13			$('.main-contents > li').hide();
14			$('.main-contents').find('.' + tabBtn).show();
15		}
16		return false;
17	});
18	
19	
20	/*------------------
21	 表示する数の調整 
22	--------------------*/
23	// 表示させる要素の総数をlengthメソッドで取得
24	var $numberListLen = $("#number_list li").length;
25	// デフォルトの表示数
26	var defaultNum = 3;
27	// 現在の表示数
28  var currentNum = 0;
29	
30	$("#number_list").each(function() {
31		// defaultNumの数だけ要素を表示
32		// defaultNumよりインデックスが大きい要素は隠す
33		$(this).find("li:not(:lt("+defaultNum+"))").hide();
34
35		// 初期表示ではデフォルト値が現在の表示数となる
36		currentNum = defaultNum;
37		
38		// タブボタンがクリックされた時の処理
39		$(".tab_item").click(function() {
40			currentNum = defaultNum;
41		});
42	});
43});
44

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

絞り込みを行っているそれぞれのタブの内容の表示数を調整したいです。

kei344

2019/02/21 08:20

「試したこと」のコードもコードブロックに入れてください。

mmngchip

2019/02/21 08:36

失礼いたしました。移動させていただきました。

退会済みユーザー

2019/02/21 08:49

コードごとにコードブロックを追加してください。

mmngchip

2019/02/22 00:42

度々失礼いたしました。追加いたしました。

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

回答1件

ベストアンサー

元のスクリプトだとタブを絞り込む関数がロード時しか読み込まれないので、記事本数の調節ができなくなっています。ですので、ロード時と記事選択のクリックイベント発生時にタブを絞り込むようにしないといけません。

また、自分が作ってみたサンプルをリンクしておきます。クラス名とリンク名が紐付いているので、あとはそのクラスの記事のうち、上位3回だけをループすれば簡単に取得できますよ。
タブコンテンツのテスト

jQuery
1$(function(){
2 /*------------------
3     表示する数の調整 
4    --------------------*/
5	// tabBtnとselClassは同じ値なので紐づけできる
6
7  //絞り込みを行う関数
8  displayTopics = function(selClass){
9		$("#number_list").each(function(){
10		   $('.main-contents > li').hide(); //最初に全要素を隠す
11		   for( var num = 0; num < 3 ; num++){
12		    	$("." + selClass).eq(num).show(); //該当するクラスに対し、表示させたい3回だけ回す
13		    }
14		})
15	}
16    /*----------------
17     タブ内容の絞込み 
18    ------------------*/
19    $('.main-contents > li').addClass('js-filter-all'); 
20    displayTopics('js-filter-all'); //ロード時の絞り込み
21    //イベント時の絞り込み
22    $('.main-top > li a').click(function(){
23	        var tabBtn = $(this).attr('href');
24	        displayTopics(tabBtn);
25	        return false;
26    });
27});