【jQuery】「もっと見る」ボタンの実装
【jQuery】「もっと見る」ボタンの実装:
ロジックはこちらと全く同じです；
変数の名前や処理の流れは若干変えました。
勉強用に作ったので、コメントが凄まじいです。
jQueryオブジェクトが入る変数には
引数で指定された要素を除外する。
インデックスが引数より小さい要素を選択する。
インデックスは配列と同じで、
インデックスが引数より大きい要素を選択する。
文字列結合を使う。
Chromeのデベロッパーツールが役に立ちました。
ボタンをクリックした時に変数がどのように変わっていくか、確認できます。
こちらのコードは別の書き方ができます。
「もっと見る」ボタンと「表示数を戻す」ボタンを同一のクラスにして、
詳しい原因はわかりませんが、Chromeで処理を追ってみると
実装内容
- 一度に表示する要素は３つ
- 「もっと見る」ボタンをクリックすると3件ずつ追加表示される
- 全ての要素を表示させたら「もっと見る」ボタンから「表示数を戻す」ボタンに切り替わる
- 「表示数を戻す」ボタンをクリックすると初期の表示数へ戻り、 「もっと見る」ボタンへ切り替わる
- 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_btnとclose_btnを切り替えようと試しました。詳しい原因はわかりませんが、Chromeで処理を追ってみると
$(this)が混ざってしまったようです。
コメント
コメントを投稿