質問: filterdata; for(var i=0; i<=7; i++){ $('').appendTo($imageWrap); } } //ラジオボタンが変わった時にフィルタリングする関数 $('input:radio').change(function(){ //チェックボタンの状況によってフィルタリングする var cate=$(this).val(); //フィルターの配列をいったん空っぽにする filterdata=[]; if(cate==="all"){//allが選択されたら全データを保持 filterdata=alldata; }else{ filterdata=$.grep(alldata,function(n){ return n.category===cate; }); } display(); }); //もっと見るで要素を追加させたい $('.more-btn').click(function(){ display(); }); ``` 参考にしたのはこちらのサイトです。 http://the-zombis.sakura.ne.jp/wp/blog/2014/01/03/post-2094/ ご教授いただけますと幸いです。 よろしくお願い致します。
回答: filterDataの何番目からアクセスするかを`display`の引数に追加してあげれば良いと思います。 下記コードのデバッグはしていません。参考程度にお願いします。 ``` //変数設定 var $imageWrap = $("#imageWrap"); var alldata = []; //ここはすべてのデータを保持しておく配列 var filterdata = []; //フィルターを掛けたデータを保持する配列 //最初に読み込んだ時に発生する関数 $.getJSON('jsonのソース', init); function init(data) { //全データを保持しておく alldata = data; //とりあえず全データを代入しておく filterdata = alldata; //データを表示させる display(0); } const MAX_DISPLAY_COUNT = 8; //画像表示させるための関数 function display(startIndex) { $imageWrap.empty(); for (var i = startIndex; i < startIndex + MAX_DISPLAY_COUNT; i++) { if(!filterdata[i]){ return; } $('').appendTo($imageWrap); } } let currentDisplayCount = 0; //ラジオボタンが変わった時にフィルタリングする関数 $('input:radio').change(function () { //チェックボタンの状況によってフィルタリングする var cate = $(this).val(); //フィルターの配列をいったん空っぽにする filterdata = []; if (cate === "all") {//allが選択されたら全データを保持 filterdata = alldata; } else { filterdata = $.grep(alldata, function (n) { return n.category === cate; }); } currentDisplayCount = 0; display(currentDisplayCount); }); //もっと見るで要素を追加させたい $('.more-btn').click(function () { currentDisplayCount += MAX_DISPLAY_COUNT; display(currentDisplayCount); }); ```