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

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

ただいまの
回答率

90.12%

jquery フィルタリング絞り込みともっと見るボタンを併用

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 105

ysfree14

score 8

jqueryで絞り込み機能ともっと見るボタンを併用で設置したいと考えています。

絞り込みの種類⇒全て・新作・再販・予約
もっと見るをクリックで4件ずつ表示

全ての時は4つずつ表示がうまく動作するのですが、
新作・再販・予約をクリックしたときに最初の4件まで表示させることはできるのですが、
もっと見るをクリックで一気に他の分類のものまで全て表示されてしまいます。

またboxesの中身はjsonで取得させる予定です。

解決策はありますか?

<div class="cta filter">
  <a class="tab-name all active" data-filter="all" href="#" role="button">すべて</a>
  <a class="tab-name new-tab" data-filter="new-tab" href="#" role="button">新作</a>
  <a class="tab-name re-tab" data-filter="re-tab" href="#" role="button">再販</a>
  <a class="tab-name booking-tab" data-filter="booking-tab" href="#" role="button">予告と予約</a>
</div>

<div class="boxes">

<!--新作商品-->
<div class="col1 new-tab tab-elm" data-category="new-tab">
<a href="" target="_top" class="block">
<div class="product-img img-col1">
<img src="" alt="">
</div>
<div class="label-wrap">
<p class="img-label new-label">新作</p>
</div>
<p class="price-text"><span>税込</span></p>
</a>
</div>
<!--新作商品-->

<!--再販商品-->
<div class="col1 re-tab tab-elm" data-category="re-tab">
<a href="" target="_top" class="block">
<div class="product-img img-col1">
<img src="" alt="">
</div>
<div class="label-wrap">
<p class="img-label re-label">再販</p>
</div>
<p class="price-text"><span>税込</span></p>
</a>
</div>
<!--再販商品-->

<!--予約商品-->
<div class="col1 booking-tab tab-elm" data-category="booking-tab">
<a class="block"  href="">
<div class="product-img img-col1">
<img src="" alt="">
</div>
<div class="label-wrap">
<p class="img-label booking-label">予約</p>
</div>
<p class="price-text"><span>税込</span></p>
</a>
</div>
<!--予約商品-->

</div>
$(document).ready(function(){

        var $filters = $('.filter [data-filter]'),
        $boxes = $('.boxes [data-category]');

        $filters.on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        $filters.removeClass('active');
        $this.addClass('active');

        var $filterColor = $this.attr('data-filter');

        if ($filterColor == 'all') {

            //全てをクリックされたときの処理
            $('.tab-more-btn').remove();
            $boxes.removeClass('is-animated')
            .fadeOut().promise().done(function() {
            $('.boxes [data-category]:lt(4)').addClass('is-animated').fadeIn();
            $('.tab-more-btn:lt(4)').hide();
            $('.tab-elm:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));    
            $(document).on('click','.tab-more-btn',function(){
                $('.tab-elm:visible:lt(4)').addClass('is-animated').fadeIn();
                $('.tab-elm:visible').closest('.boxes').last().after($('.tab-more-btn'));
                if($('.tab-elm:hidden').length==0) $('.tab-more-btn').remove();
            });    

        });

        } else {

            //全て以外をクリックしたときの処理
            $('.tab-more-btn').remove();
            $('.tab-elm:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));        
            $boxes.removeClass('is-animated')
            .fadeOut().promise().done(function() {
            $boxes.filter('[data-category = "' + $filterColor + '"]:lt(4)').addClass('is-animated').fadeIn();
            });

            $(document).on('click','.tab-more-btn',function(){
                $boxes.filter('[data-category = "' + $filterColor + '"]:lt(4)').addClass('is-animated').fadeIn();
                $('.tab-elm:visible').closest('.boxes').last().after($('.tab-more-btn'));
                if($('.tab-elm:hidden').length==0) $('.tab-more-btn').remove();
            });        

        }

        });

        //初期の全て表示されている状態
        $('.tab-elm:gt('+(4-1)+')').hide();
        $('.tab-elm:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));
        $(document).on('click','.tab-more-btn',function(){
            $('.tab-elm:lt('+($('.tab-elm:visible').length+4)+')').show();
            $('.tab-elm:visible').closest('.boxes').last().after($('.tab-more-btn'));
            if($('.tab-elm:hidden').length==0) $('.tab-more-btn').remove();
        });

    });
コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/06/17 13:45

    サンプルデータをご提示ください。

    キャンセル

回答 1

0

全て・新作・再販・予約の絞り込みをするならラジオボタンなど
データが保持できるものを利用してください

sample

<script>
$(function(){
  $(':radio[name=category]').on('change',function(){
    $('.boxes .tab-elm').hide().filter($(this).val()).show();
  });
});
</script>
<div class="cta filter">
<label><input type="radio" name="category" value="*" checked>すべて</label>
<label><input type="radio" name="category" value=".new-tab">新作</label>
<label><input type="radio" name="category" value=".re-tab">再販</label>
<label><input type="radio" name="category" value=".booking-tab">予告と予約</label>
</div>

<div class="boxes">
<div class="col1 tab-elm new-tab">new1</div>
<div class="col1 tab-elm re-tab">re1</div>
<div class="col1 tab-elm booking-tab">book1</div>
</div>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/18 11:12 編集

    ありがとうございます。
    上記のソースを参考に少し考えてみたのですが、表示させる要素にクラス名「on」をつけて「もっと見る」ボタンで4件ずつ表示させようと思いました。

    ・最初にすべての状態でもっと見るボタンを設置して4件ずつ表示
    ・絞り込みで最初の4件まで表示

    上記は実装できたのですが、絞り込みで4件まで表示して「もっと見る」を押したときにうまく4件ずつ取得できません。

    ご回答いただけますと幸いです。よろしくお願い致します。

    $(function(){

    //全ての要素に.onをつける
    $('.tab-elm').addClass("on");

    //.onを4件ずつ表示
    $('.on:gt('+(4-1)+')').hide();

    //もっと見るボタンを配置
    $('.on:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));

    //もっと見るボタンの処理
    $(document).on('click','.tab-more-btn',function(){
    $('.tab-elm:lt('+($('.tab-elm:visible').length+4)+')').addClass("on").show();
    $('.on:visible').closest('.boxes').last().after($('.tab-more-btn'));
    if($('.on:hidden').length==0) $('.tab-more-btn').remove();
    });

    //絞り込みをした要素に.onをつけて4件ずつ表示
    $(':radio[name=category]').on('change',function(){

    //一度もっと見るボタンを消す
    $('.tab-more-btn').remove();

    //一度全てのtab-elmから.onを消す
    $('.tab-elm').removeClass("on");

    //絞り込みした要素に.onをつける
    $('.boxes .tab-elm').hide().filter($(this).val()).addClass("on").show();

    //.onを4件表示
    $('.on:gt('+(4-1)+')').hide();

    //4件表示の下に「もっと見る」ボタンを配置
    $('.on:visible').closest('.boxes').after($('<div class="tab-more-btn">もっと見る</div>'));
    });

    });

    キャンセル

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

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