Help us understand the problem. What is going on with this article?

【jQuery】「もっと見る」ボタンの実装

More than 1 year has passed since last update.

実装内容

  1. 一度に表示する要素は3つ
  2. 「もっと見る」ボタンをクリックすると3件ずつ追加表示される
  3. 全ての要素を表示させたら「もっと見る」ボタンから「表示数を戻す」ボタンに切り替わる
  4. 「表示数を戻す」ボタンをクリックすると初期の表示数へ戻り、 「もっと見る」ボタンへ切り替わる
  5. 2〜4を繰り返す

参考記事

ロジックはこちらと全く同じです;
変数の名前や処理の流れは若干変えました。

jQuery 「もっと見る」でn件ずつ表示し、末尾に達したら初期件数表示に戻すボタンを設置したい

こちらの記事も参考にさせていただきました。

手軽に実装するもっと見るボタン

HTML

more_show_4.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery_sample</title>
  <!-- jQueryの読み込み -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <div id="number_list">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>

    <button type=button id="more_btn">もっと見る</button>
    <button type=button id="close_btn">表示数を戻す</button>
  </div>

  <!-- jsファイルの読み込み -->
  <script src="more_show_script_4.js"></script>
</body>
</html>

jQuery

勉強用に作ったので、コメントが凄まじいです。

more_show_script_4.js
$(function() {
  // 表示させる要素の総数をlengthメソッドで取得
  var $numberListLen = $("#number_list li").length;
  // デフォルトの表示数
  var defaultNum = 3;
  // ボタンクリックで追加表示させる数
  var addNum = 3;
  // 現在の表示数
  var currentNum = 0;

  $("#number_list").each(function() {
    // moreボタンを表示し、closeボタンを隠す
    $(this).find("#more_btn").show();
    $(this).find("#close_btn").hide();

    // defaultNumの数だけ要素を表示
    // defaultNumよりインデックスが大きい要素は隠す
    $(this).find("li:not(:lt("+defaultNum+"))").hide();

    // 初期表示ではデフォルト値が現在の表示数となる
    currentNum = defaultNum;

    // moreボタンがクリックされた時の処理
    $("#more_btn").click(function() {
      // 現在の表示数に追加表示数を加えていく
      currentNum += addNum;

      // 現在の表示数に追加表示数を加えた数の要素を表示する
      $(this).parent().find("li:lt("+currentNum+")").slideDown();

      // 表示数の総数よりcurrentNumが多い=全て表示された時の処理
      if($numberListLen <= currentNum) {
        // 現在の表示数をデフォルト表示数へ戻す
        currentNum = defaultNum;
        // インデックス用の値をセット
        indexNum = currentNum - 1;

        // moreボタンを隠し、closeボタンを表示する
        $("#more_btn").hide();
        $("#close_btn").show();

        // closeボタンがクリックされた時の処理
        $("#close_btn").click(function() {
          // デフォルト数以降=インデックスがindexNumより多い要素は非表示にする
          $(this).parent().find("li:gt("+indexNum+")").slideUp();

          // closeボタンを隠し、moreボタンを表示する
          $(this).hide();
          $("#more_btn").show();
        });
      }
    });
  });
});

初心者メモ

変数名

jQueryオブジェクトが入る変数には$をつける。

notとltとgt

:not("selector")

引数で指定された要素を除外する。

:lt(index)

インデックスが引数より小さい要素を選択する。
インデックスは配列と同じで、0始まりになる。

:gt(index)

インデックスが引数より大きい要素を選択する。

変数を引数にする場合

文字列結合を使う。

more_show_script_4.js
$(this).find("li:not(:lt("+defaultNum+"))").hide();

コンソール

Chromeのデベロッパーツールが役に立ちました。

console.log();を仕込んでおくと、Consoleタブに引数の値が表示されます。
ボタンをクリックした時に変数がどのように変わっていくか、確認できます。

$(this)の内容確認にも良いかもです。

eachメソッドで書いてみる

こちらのコードは別の書き方ができます。

more_show_script_4.js
$(this).find("li:not(:lt("+defaultNum+"))").hide();

eachメソッドで書くとこんな感じです。

more_show_script_4.js
$("#number_list li").each(function(index, element) {
  if(index >= defaultNum) {
    $(this).hide();
  }
});

これはダメだった

「もっと見る」ボタンと「表示数を戻す」ボタンを同一のクラスにして、addClassメソッドmore_btnclose_btnを切り替えようと試しました。

詳しい原因はわかりませんが、Chromeで処理を追ってみると$(this)が混ざってしまったようです。

yukibe
2018年8月よりWebエンジニア。主にPHP。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away