回答編集履歴

1 const => let

FKM

FKM score 2740

2019/09/03 16:07  投稿

基本的な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
/*以上、前略*/
$.getJSON('jsonのソース',init);
 function init(data) {
   //全データを保持しておく
   alldata = data;
   //とりあえず全データを代入しておく
   filterdata = alldata;
   //データを表示させる
   display(0);
 }
/*以下を書き加える*********************/
const json_idx;
let json_idx;
$('.select-filter').each(function(){
   $(this).find('input[type=radio]').val();
   json_idx = $(this).data('jsonidx'); //jsonのインデックスを埋め込んだデータから取得
   display(json_idx); //任意のフィルターを行う関数
})
//
let currentDisplayCount = 0;
 //ラジオボタンが変わった時にフィルタリングする関数
$('.original-filter input:radio').each(function(){
   $(this).on("click",function(){
      $boxes.empty();
      //チェックボタンの状況によってフィルタリングする
      var cate=$(this).val();
      //フィルターの配列をいったん空っぽにする
      filterdata=[];
      if(cate==="all"){//allが選択されたら全データを保持
        filterdata=alldata;
      }else{
         filterdata=$.grep(alldata,function(n){
         return n.category===cate;
      }
  })
})
/*以下省略*/
```
すぐに動作確認ができないのですが、これで調整してみてください。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る