質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.64%

for文でn回ずつループさせ、タブ出し分けを2つ設置させたい

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 265

ysfree14

score 8

for文を使ってjsonの要素を抜き出しています。
フィルタリングで要素の出し分けを行い、下記コードにて8個ずつ表示させている状態です。
(もっと見るボタンをクリックでさらに8件ずつ表示していく)

参考にしたのはこちらのサイトです。
http://the-zombis.sakura.ne.jp/wp/blog/2014/01/03/post-2094/

フィルタリングが1箇所の場合は思い通りの動作ができたのですが、2つの異なったjsonを読み込み、フィルタリングもそれぞれ2箇所に分けて設置したい場合、どのように記述すればよいのでしょうか?

id="boxes"とid="select-boxes"にそれぞれフィルタリングを設置したいと考えています。
よろしくお願い致します。

<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>
$(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);
  });

});
[

{
"category": "re",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},        

{
"category": "re",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},

]    
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

回答 2

+1

基本的な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はインデックスさえ取得できればいいので、他にもいい方法はあると思います。

/*以上、前略*/
$.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;
       }
   })
})
/*以下省略*/

すぐに動作確認ができないのですが、これで調整してみてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/03 19:04

    ご回答ありがとうございます。
    最初ページを読み込んだ際に、
    id="boxes"
    id="select-boxes"
    上記2か所にそれぞれ最新の8つを表示させるにはどうすればいいのでしょうか?

    キャンセル

  • 2019/09/03 21:07

    同じクラス名にしておいて、eachメソッドで順繰りに値を取得する、同じ方法で行けるはずです
    一回だと行けるってことなら、2回でも3回でも行けるはずですから。

    その際、同じクラス名にしておくことです。クラス名を別にしてしまうと別のDOMとして認識してしまいますので。

    キャンセル

  • 2019/09/09 11:29

    ご回答ありがとうございます。
    json_idx = $(this).data('jsonidx'); //jsonのインデックスを埋め込んだデータから取得
    上記の部分の処理が理解できておりません、、
    jsonも1つにまとめ、インデックスを追加するということなのでしょうか?

    キャンセル

0

jsonファイルは一定の次元の配列になって格納されます。それを引き出すのですが、そのためにはインデックスを0,1と変えていく必要があると思います。

jQueryのdataメソッドを任意の値を格納、取得したいときに使うので、そこに順番に0,1と格納しておくだけですよ。そんな回りくどいことしなくても普通に変数で代入してもいいとは思いますけど。

元の式にdisplay(0);というのがあると思いますが、この0というのはJSONのインデックスを示すものです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/09 15:20

    ご回答ありがとうございます。
    引き続き調整してみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる