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

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

ただいまの
回答率

90.45%

  • JavaScript

    21057questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8384questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQuery 絞り込みで「もっと見る」ボタンで徐々に要素を表示していく

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 104

ysfree14

score 3

jQueryで要素の絞り込みを作成したのですが、もっと見るボタンで要素を徐々に表示したいと考えています。
最初に4つまで表示、もっと見るボタンをクリックで4つずつ下に表示していくという動きを実装したいです。

最初に5つ目以降を非表示にするところまではできたのですが、.tab-nameをクリックしたときに全てが表示されてしまいます。
どのようにすればよいのでしょうか。
よろしくお願い致します。

<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>

<div class="tab-more-btn">もっと見る</div>
$(window).on('load',function(){

$('.boxes .tab-elm:nth-child(n + 5)').hide();

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');
$('.boxes .tab-elm:nth-child(n + 5)').hide();

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

if ($filterColor == 'all') {
$boxes.removeClass('is-animated')
.fadeOut().promise().done(function() {
$boxes.addClass('is-animated').fadeIn();
});
} else {
$boxes.removeClass('is-animated')
.fadeOut().promise().done(function() {
$boxes.filter('[data-category = "' + $filterColor + '"]')
.addClass('is-animated').fadeIn();
});
}
});

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

+1

考え方は2つあります。

  • 全部のデータをもっておいて、4件ずつ順次表示していく
    この場合:visibledの数を数えて4足していけばOK

  • 4件だけサーバーからデータをとってきておいて、もっと見るを押すことで0
    ajaxでサーバーから4件追加でうけとる。
    その場合所定の4県を吐き出してくれるAPIを用意してもらう必要があります。

sample

上記前者ならこんな感じでいけます

<script>
var view=4;
$(function(){
  $('.hoge:gt('+(view-1)+')').hide();
  $('.hoge:visible:last').after($('<div id="more">もっとみる</div>'));
  $(document).on('click','#more',function(){
    $('.hoge:lt('+($('.hoge:visible').length+view)+')').show();
    $('.hoge:visible:last').after($('#more'));
    if($('.hoge:hidden').length==0) $('#more').remove();
  });
});
</script>

<div class= "hoge">1</div>
<div class= "hoge">2</div>
<div class= "hoge">3</div>
<div class= "hoge">4</div>
<div class= "hoge">5</div>
<div class= "hoge">6</div>
<div class= "hoge">7</div>
<div class= "hoge">8</div>
<div class= "hoge">9</div>
<div class= "hoge">10</div>
<div class= "hoge">11</div>
<div class= "hoge">12</div>
<div class= "hoge">13</div>

調整

<script>
var view=4;
$(function(){
  $('.tab-elm:gt('+(view-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+view)+')').show();
    $('.tab-elm:visible').closest('.boxes').last().after($('.tab-more-btn'));
    if($('.tab-elm:hidden').length==0) $('.tab-more-btn').remove();
  });
});
</script>
<div class="boxes">
<div class= "tab-elm">1</div>
<div class= "tab-elm">2</div>
<div class= "tab-elm">3</div>
<div class= "tab-elm">4</div>
</div>
<div class="boxes">
<div class= "tab-elm">5</div>
<div class= "tab-elm">6</div>
<div class= "tab-elm">7</div>
<div class= "tab-elm">8</div>
</div>
<div class="boxes">
<div class= "tab-elm">9</div>
<div class= "tab-elm">10</div>
<div class= "tab-elm">11</div>
<div class= "tab-elm">12</div>
</div>
<div class="boxes">
<div class= "tab-elm">13</div>
</div>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/11 17:58

    ありがとうございます。
    すべてのタブで最初の4つを表示させた場合、新作や再販を押したときにすべてで最初表示した4つのうちから該当のものしか表示されません。

    $filters.on('click', function(e) { の下に
    $('.tab-elm').show();を追記したのですが、何がいけないのでしょうか?

    キャンセル

  • 2019/06/12 15:31

    ちょっとおっしゃる意味がわからないのですが
    .tab-elmは最初から.boxesに4つずつ収まっているということですか?

    キャンセル

  • 2019/06/13 19:21 編集

    jsonでhtmlを生成しており、4つずつではなく全て並んで収まっています。
    全てのタブではうまく動作はするのですが、再販をクリックしたときに、全てのタブで最初に表示されていた4つの中の再販しか表示さず、再販全てから最初の4つが抽出できておりません。

    キャンセル

  • 2019/06/14 16:03

    度々申し訳ございません。
    jsonで一気に.tab-elmを生成しているので、4つごとに.boxesを入れこめずにいる状態です。

    キャンセル

  • 2019/06/17 13:43 編集

    すべて並んでいるなら私が最初に提示した書き方で十分です

    キャンセル

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

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

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

  • JavaScript

    21057questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8384questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。