for文でn回ずつループさせ、タブ出し分けを２つ設置させたい

for文を使ってjsonの要素を抜き出しています。
フィルタリングで要素の出し分けを行い、下記コードにて8個ずつ表示させている状態です。
(もっと見るボタンをクリックでさらに８件ずつ表示していく)

参考にしたのはこちらのサイトです。
http://the-zombis.sakura.ne.jp/wp/blog/2014/01/03/post-2094/

フィルタリングが１箇所の場合は思い通りの動作ができたのですが、２つの異なったjsonを読み込み、フィルタリングもそれぞれ２箇所に分けて設置したい場合、どのように記述すればよいのでしょうか？

id="boxes"とid="select-boxes"にそれぞれフィルタリングを設置したいと考えています。
よろしくお願い致します。

html
1<form class="original-filter">					
2　　<label class="btn-on">
3　　　　<input type="radio" name="list" value="all" checked="checked">
4　　　　<span>All</span>
5　　</label>
6　　<label>
7　　　　<input type="radio" name="list" value="new">
8　　　　<span>new</span>
9　　</label>
10　　<label>
11　　　　<input type="radio" name="list" value="re">
12　　　　<span>re</span>
13　　</label>
14</form>
15					
16<div id="boxes" class="boxes cf"></div>
17<div class="original-tab-more-btn">もっと見る</div>
18
19<!--追加するフィルタリング-->					
20<form class="select-filter">					
21　　<label class="btn-on">
22　　　　<input type="radio" name="list" value="all" checked="checked">
23　　　　<span>All</span>
24　　</label>
25　　<label>
26　　　　<input type="radio" name="list" value="s-new">
27　　　　<span>new</span>
28　　</label>
29　　<label>
30　　　　<input type="radio" name="list" value="s-re">
31　　　　<span>re</span>
32　　</label>
33</form>
34					
35<div id="select-boxes" class="boxes cf"></div>
36<div class="select-tab-more-btn">もっと見る</div>

jQuery
1$(function(){
2		
3  //変数設定
4  var $boxes = $("#boxes");
5  var alldata = []; //ここはすべてのデータを保持しておく配列
6  var filterdata = []; //フィルターを掛けたデータを保持する配列
7
8  //最初に読み込んだ時に発生する関数
9  $.getJSON('jsonのソース',init);
10
11　function init(data) {
12　　　//全データを保持しておく
13　　　alldata = data;
14　　　//とりあえず全データを代入しておく
15　　　filterdata = alldata;
16　　　//データを表示させる
17　　　display(0);
18　}
19　
20　const MAX_DISPLAY_COUNT = 8;
21
22　//表示させるための関数
23  function display(startIndex) {
24  
25  $('.original-tab-more-btn').show();
26    for (var i = startIndex; i < startIndex + MAX_DISPLAY_COUNT; i++) {
27      if(!filterdata[i]){
28        $('.original-tab-more-btn').hide();
29      return;
30    }
31	$('<div class="original-tab-elm"><a href="' + filterdata[i].url + '" target="_top" class="block"><div class="product-img img-col1"><img src="' + filterdata[i].img + '" alt="" id="product-img"></div><div class="label-wrap"><p class="img-label' + filterdata[i].labelName + '">' + filterdata[i].dateText + '</p><p class="img-label' + filterdata[i].labelName2 + '">' + filterdata[i].dateText2 + '</p></div><p class="price-text">' + filterdata[i].price + '</p></a></div>').appendTo($boxes);
32    }
33  }　
34　
35  let currentDisplayCount = 0;
36
37  //ラジオボタンが変わった時にフィルタリングする関数
38  $('.original-filter input:radio').change(function(){
39			
40    $boxes.empty();
41			
42    //チェックボタンの状況によってフィルタリングする
43    var cate=$(this).val();
44    //フィルターの配列をいったん空っぽにする
45    filterdata=[];
46
47    if(cate==="all"){//allが選択されたら全データを保持
48      filterdata=alldata;
49
50    }else{ 
51      filterdata=$.grep(alldata,function(n){
52      return n.category===cate;
53    });
54  }
55
56  currentDisplayCount = 0;
57  display(currentDisplayCount);
58						
59  });
60
61  //もっと見るで要素を追加
62  $('.original-tab-more-btn').click(function () {
63    currentDisplayCount += MAX_DISPLAY_COUNT;
64    display(currentDisplayCount);
65  });
66
67});

json
1[
2	
3{
4"category": "re",
5"url": "",
6"img": "",
7"labelName": "",
8"dateText": "",
9"labelName2": "",
10"dateText2": "",
11"price": ""
12},		
13	
14{
15"category": "re",
16"url": "",
17"img": "",
18"labelName": "",
19"dateText": "",
20"labelName2": "",
21"dateText2": "",
22"price": ""
23},
24
25]

think49

2019/10/22 04:25

@ysfree14 さん https://teratail.com/help/avoid-asking の「過去に投稿した質問と同じ内容の質問」を参照下さい https://teratail.com/questions/218374

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

回答2件

基本的なeachメソッドで解決すると思います。双方に同じクラスを指定しておき、jsonデータの回収用にdataメソッドで値を取得しておくようにします。

<form class="select-filter" data-jsonidx="0">                    
　　<label class="btn-on">
　　　　<input type="radio" name="list" value="all" checked="checked">
　　　　<span>All</span>
　　</label>
　　<label>
　　　　<input type="radio" name="list" value="new">
　　　　<span>new</span>
　　</label>
　　<label>
　　　　<input type="radio" name="list" value="re">
　　　　<span>re</span>
　　</label>
</form>

<div id="boxes" class="boxes cf"></div>
<div class="original-tab-more-btn">もっと見る</div>

<!--追加するフィルタリング-->                    
<form class="select-filter" data-jsonidx="1">                    
　　<label class="btn-on">
　　　　<input type="radio" name="list" value="all" checked="checked">
　　　　<span>All</span>
　　</label>
　　<label>
　　　　<input type="radio" name="list" value="s-new">
　　　　<span>new</span>
　　</label>
　　<label>
　　　　<input type="radio" name="list" value="s-re">
　　　　<span>re</span>
　　</label>
</form>

それからeachメソッドで任意の回数ループさせれば、同じ処理を繰り返し行えます。またイベントトリガーもeachメソッドで任意のラジオボタンが選択されるようにすれば行けるのではないかと思います。
jsonはインデックスさえ取得できればいいので、他にもいい方法はあると思います。

JQuery
1/*以上、前略*/
2$.getJSON('jsonのソース',init);
3
4　function init(data) {
5　　　//全データを保持しておく
6　　　alldata = data;
7　　　//とりあえず全データを代入しておく
8　　　filterdata = alldata;
9　　　//データを表示させる
10　　　display(0);
11　}
12
13/*以下を書き加える*********************/
14let json_idx; 
15$('.select-filter').each(function(){
16    $(this).find('input[type=radio]').val();
17    json_idx = $(this).data('jsonidx'); //jsonのインデックスを埋め込んだデータから取得
18    display(json_idx); //任意のフィルターを行う関数
19})
20
21//
22let currentDisplayCount = 0;
23
24  //ラジオボタンが変わった時にフィルタリングする関数
25$('.original-filter input:radio').each(function(){
26    $(this).on("click",function(){
27       $boxes.empty();
28       //チェックボタンの状況によってフィルタリングする
29       var cate=$(this).val();
30       //フィルターの配列をいったん空っぽにする
31       filterdata=[];
32
33       if(cate==="all"){//allが選択されたら全データを保持
34         filterdata=alldata;
35       }else{ 
36          filterdata=$.grep(alldata,function(n){
37          return n.category===cate;
38       }
39   })
40})
41/*以下省略*/
42