for文を使ってjsonの要素を抜き出したいと考えています。
フィルタリングで要素の出し分けを行い、8個ずつ表示させたいと考えています。
最初に8個表示させて、「もっと見る」をクリックでさらに8個ずつ追加していくことはできるのでしょうか?
html
1<form> 2 <span> 3 <input type="radio" name="list" value="all" checked> 4 <label>All</label> 5 </span> 6 <span> 7 <input type="radio" name="list" value="cate"> 8 <label>cafe</label> 9 </span> 10 <span> 11 <input type="radio" name="list" value="tokyo"> 12 <label>tokyo</label> 13 </span> 14 <span> 15 <input type="radio" name="list" value="autum"> 16 <label >autum</label> 17 </span> 18</form> 19<ul id="imageWrap"></ul> 20<p class="more-btn">もっと見る</p>
jquery
1//変数設定 2var $imageWrap=$("#imageWrap"); 3var alldata=[]; //ここはすべてのデータを保持しておく配列 4var filterdata=[]; //フィルターを掛けたデータを保持する配列 5 6/最初に読み込んだ時に発生する関数 7$.getJSON('jsonのソース',init); 8 9function init(data){ 10//全データを保持しておく 11alldata=data; 12 13//とりあえず全データを代入しておく 14filterdata=alldata; 15 16//データを表示させる 17display(); 18} 19 20//画像表示させるための関数 21function display(){ 22 $imageWrap.empty(); 23 var dataArray = filterdata; 24 for(var i=0; i<=7; i++){ 25 $('<div class="elm"><img src="'+filterdata[i].url+' "></div>').appendTo($imageWrap); 26 } 27} 28 29//ラジオボタンが変わった時にフィルタリングする関数 30$('input:radio').change(function(){ 31 //チェックボタンの状況によってフィルタリングする 32 var cate=$(this).val(); 33 //フィルターの配列をいったん空っぽにする 34 filterdata=[]; 35 36 if(cate==="all"){//allが選択されたら全データを保持 37 filterdata=alldata; 38 39 }else{ 40 filterdata=$.grep(alldata,function(n){ 41 return n.category===cate; 42 }); 43 } 44 45 display(); 46}); 47 48//もっと見るで要素を追加させたい 49$('.more-btn').click(function(){ 50 display(); 51});
参考にしたのはこちらのサイトです。
http://the-zombis.sakura.ne.jp/wp/blog/2014/01/03/post-2094/
ご教授いただけますと幸いです。
よろしくお願い致します。
回答1件