実装内容
- 一度に表示する要素は３つ
- 「もっと見る」ボタンをクリックすると3件ずつ追加表示される
- 全ての要素を表示させたら「もっと見る」ボタンから「表示数を戻す」ボタンに切り替わる
- 「表示数を戻す」ボタンをクリックすると初期の表示数へ戻り、 「もっと見る」ボタンへ切り替わる
- 2〜4を繰り返す
参考記事
ロジックはこちらと全く同じです；
変数の名前や処理の流れは若干変えました。
こちらの記事も参考にさせていただきました。
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)が混ざってしまったようです。