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); |
| } |
| /*以下を書き加える*********************/ |
| 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; |
| } |
| }) |
| }) |
| /*以下省略*/ |
| ``` |
| すぐに動作確認ができないのですが、これで調整してみてください。 |
