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

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

# 参考記事
ロジックはこちらと全く同じです；
変数の名前や処理の流れは若干変えました。
>[jQuery 「もっと見る」でn件ずつ表示し、末尾に達したら初期件数表示に戻すボタンを設置したい](https://teratail.com/questions/92715)

こちらの記事も参考にさせていただきました。
>[手軽に実装するもっと見るボタン](https://qiita.com/fakefurcoronet/items/9f9900ad7c85bd034772)

# 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_btn``と``close_btn``を切り替えようと試しました。

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