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

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

ただいまの
回答率

87.79%

jQueryでフィルタリングのコードを整理したい

受付中

回答 1

投稿 編集

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

score 11

jsonを読み込みコードを生成、jQueryでフィルタリング表示するコンテンツをページの2か所に設置しています。
フィルタリングに関しては初期表示は8個、もっと見るをクリックでさらに8個ずつ追加表示というようにしています。

1つ目のコードをそのまま複製するような形で下記のように複製してみたのですが、もっとスマートにjqueryを記述するにはどのようにすればいいのでしょうか?
よろしくお願い致します。

$(function(){

        //1つ目
        //変数設定
        var $boxes = $("#boxes");
        var alldata = []; //ここはすべてのデータを保持しておく配列
        var filterdata = []; //フィルターを掛けたデータを保持する配列

        //最初に読み込んだ時に発生する関数
        $.getJSON('1つ目のjsonのパス',init);

        function init(data) {
            //全データを保持しておく
            alldata = data;
            //とりあえず全データを代入しておく
            filterdata = alldata;
            //データを表示させる
            display(0);
        }

        const MAX_DISPLAY_COUNT = 8;

        //画像表示させるための関数
        function display(startIndex) {
            //$boxes.empty();
            $('.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 matchHeight"><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);
        });
});         
$(function(){

     //2つ目
     //変数設定
        var $boxes2 = $("#select-boxes");
        var alldata2 = []; //ここはすべてのデータを保持しておく配列
        var filterdata2 = []; //フィルターを掛けたデータを保持する配列

        //最初に読み込んだ時に発生する関数
        $.getJSON('2つ目のjsonのパス',init);

        function init(data2) {
            //全データを保持しておく
            alldata2 = data2;
            //とりあえず全データを代入しておく
            filterdata2 = alldata2;
            //データを表示させる
            display2(0);
        }

        const MAX_DISPLAY_COUNT2 = 8;

        //画像表示させるための関数
        function display2(startIndex2) {
            //$boxes.empty();
            $('.select-tab-more-btn').show();
            for (var i = startIndex2; i < startIndex2 + MAX_DISPLAY_COUNT2; i++) {
            if(!filterdata2[i]){
                $('.select-tab-more-btn').hide();
            return;
            }
                $('<div class="select-tab-elm matchHeight"><a href="' + filterdata2[i].url + '" target="_top" class="block"><div class="product-img img-col1"><img src="' + filterdata2[i].img + '" alt="" id="product-img"></div><div class="label-wrap"><p class="img-label' + filterdata2[i].labelName + '">' + filterdata2[i].dateText + '</p><p class="img-label' + filterdata2[i].labelName2 + '">' + filterdata2[i].dateText2 + '</p></div><p class="price-text">' + filterdata2[i].price + '</p></a></div>').appendTo($boxes2);
            }
        }

        let currentDisplayCount2 = 0;

        //ラジオボタンが変わった時にフィルタリングする関数
        $('.select-filter input:radio').change(function(){

            $boxes2.empty();

            //チェックボタンの状況によってフィルタリングする
            var cate2=$(this).val();

            //フィルターの配列をいったん空っぽにする
            filterdata2=[];

            if(cate2==="all"){//allが選択されたら全データを保持
                filterdata2=alldata2;

            }else{ 
                filterdata2=$.grep(alldata2,function(n){
                    return n.category===cate2;
                });
            }

            currentDisplayCount2 = 0;
            display2(currentDisplayCount2);

        });

        //もっと見るで要素を追加させたい
        $('.select-tab-more-btn').click(function () {
            currentDisplayCount2 += MAX_DISPLAY_COUNT2;
            display2(currentDisplayCount2);
        });
});
[

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

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

]
[

{
"category": "new-s",
"url": "",
"img": "",
"labelName": "",
"dateText": "",
"labelName2": "",
"dateText2": "",
"price": ""
},    

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

]
<!--1つ目-->
<form>                    
    <label>
        <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>

<!--2つ目-->
<form>                    
    <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-s">
        <span>new</span>
    </label>
    <label>
        <input type="radio" name="list" value="re-s">
        <span>re</span>
    </label>
</form>

<div id="select-boxes" class="boxes cf"></div>
<div class="select-tab-more-btn">もっと見る</div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • yambejp

    2019/11/14 16:56

    HTMLとjsonデータを例示して、想定する結果を説明してください

    キャンセル

  • ysfree14

    2019/11/14 18:56

    追記しました、よろしくお願い致します。

    キャンセル

回答 1

0

init関数が2度設置されたりしてちょっと整合性が取れていないと思います
$.getJSON()が2度実行されているのは、最初が1つ目のJSON、次のが2つ目のJSONを呼ぶのでしょうか?

sample

<script>
$(function(){
  a();
  function a(){
    console.log(1);
  }
  a();
  function a(){
    console.log(2);
  }
  a();
});
</script>


※競合した名前の関数を設定しても、上書きされてあとの方しか実行されません

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/11/15 17:36

    回答ありがとうございます。
    はい、最初が1つ目のjsonで次が2つ目のjsonを読み込んでいます。
    通常は複数のinit関数は使用しないのでしょうか?

    キャンセル

  • 2019/11/15 17:44

    sampleつけておきました

    キャンセル

  • 2019/11/16 14:55

    回答ありがとうございます。
    1つ目・2つ目の処理それぞれを$(function(){ ~ });で囲っていると正常に動作します。
    これで一応は問題ないでしょうか?

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る