ysfree14 score 11
2019/09/03 12:56 投稿
| 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 |
| <form class="original-filter"> |
| <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"> |
| <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> |
| <div id="select-boxes" class="boxes cf"></div> |
| <div class="select-tab-more-btn">もっと見る</div> |
| ``` |
| ```jQuery |
| $(function(){ |
| //変数設定 |
| var $boxes = $("#boxes"); |
| var alldata = []; //ここはすべてのデータを保持しておく配列 |
| var filterdata = []; //フィルターを掛けたデータを保持する配列 |
| //最初に読み込んだ時に発生する関数 |
| $.getJSON('jsonのソース',init); |
| function init(data) { |
| //全データを保持しておく |
| alldata = data; |
| //とりあえず全データを代入しておく |
| filterdata = alldata; |
| //データを表示させる |
| display(0); |
| } |
| const MAX_DISPLAY_COUNT = 8; |
| //表示させるための関数 |
| function display(startIndex) { |
| $('.original-tab-more-btn').show(); |
| for (var i = startIndex; i < startIndex + MAX_DISPLAY_COUNT; i++) { |
| if(!filterdata[i]){ |
| $('.original-tab-more-btn').hide(); |
| return; |
| } |
| $('<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); |
| } |
| } |
| let currentDisplayCount = 0; |
| //ラジオボタンが変わった時にフィルタリングする関数 |
| $('.original-filter input:radio').change(function(){ |
| $boxes.empty(); |
| //チェックボタンの状況によってフィルタリングする |
| 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); |
| }); |
| //もっと見るで要素を追加 |
| $('.original-tab-more-btn').click(function () { |
| currentDisplayCount += MAX_DISPLAY_COUNT; |
| display(currentDisplayCount); |
| }); |
| }); |
| ``` |
| ```json |
| [ |
| { |
| "category": "re", |
| "url": "", |
| "img": "", |
| "labelName": "", |
| "dateText": "", |
| "labelName2": "", |
| "dateText2": "", |
| "price": "" |
| }, |
| { |
| "category": "re", |
| "url": "", |
| "img": "", |
| "labelName": "", |
| "dateText": "", |
| "labelName2": "", |
| "dateText2": "", |
| "price": "" |
| }, |
| }, |
| ] |
| ``` |
