表示数を増やす「もっと見る」ボタンをJavaScriptで実装する方法
2636 回閲覧されました
みなさんこんにちは、jonioです。
今回は「もっと見る」ボタンをクリックした時に表示されている記事を増やすのをJavaScriptで実装する方法を解説します。
私はLaravelのサイトに実装しましたがWordPressや他の言語でも実装可能だと思います。
それでは説明します。
デモ
デモは↓です。
最初4件の記事が表示されていてもっと見るボタンを押すたびに表示する記事を4件増やして表示する記事がなくなったらもっと見るボタンが表示されなくなります。
初期表示
HTML（今回はLaravelなのでblade）とSCSSは↓になります。
SCSSは今回の解説に関係ない部分がありますがそれは無視して下さい。
言語がLaravelなのでLaravelではない言語を使っている方はLaravelの部分は自分が使っている言語に置き換えて下さい。
1つの記事を表示しているのが5行目〜10行目です。
もっと見るボタンは12行目です。
今回のデモは記事を全部で10件表示していますが最初は4件だけ表示させてもっと見るボタンをクリックする事で4件づつ表示を増やします。
最初4件だけ表示して4件づつ表示件数を増やすのをJavaScriptで行います。
まずは4件だけ表示した状態にします。
2行目は最初に表示する記事の件数です。
7行目の「DOMContentLoaded」はページのHTMLが全て生成された状態で表示件数を制限させる為にあります。
8行目は非表示にする記事の件数を指定する為にあります。
表示件数を制限しているのが10行目〜14行目です。
10行目の「targetsLength > first」は「表示する全ての件数（10件）が4件よりも多い」という意味です。
この時11行目〜13行目より表示する5件目〜10件目にSCSSを追加する事で非表示にしています。
非表示にする為のSCSSは↓でそれを追記します。
もっと見るボタンをクリックして表示件数を増やす
JavaScriptのコードを↓にします。
9行目はもっと見るボタンをクリックした時の表示する件数を指定するのに使います。
26行目〜34行目はもっと見るボタンをクリックした時に新たに記事を表示する為の記述です。
表示する記事は全部で10あって現在1件目〜4件目が表示され5件目〜10件目は表示されていません。
31行目〜33行目で表示されていない5件目〜10件目の内の5件目〜8件目を表示します。
表示する記事が少なくなると変になる
今のままではまずい事があります。
もっと見るボタンを1回クリックすると4件表示されるので表示されている記事が全部で8件で表示されていない記事が2件になります。
この状態でもっと見るボタンをクリックすると記事を4件表示しないといけないのに表示されていない記事が2件しかなく4件表示ができないので挙動が変になります。
そこで表示する件数（add）を2件にしないといけませんがその為に28行目〜30行目があります。
もっと見るボタンを消す
今のままでは記事を全て（10件）件表示した後ももっと見るボタンは表示されたままですがそれは変なので記事を全て表示したらもっと見るボタンを非表示にします。
JavaScriptを↓にします。
これで表示されていない記事の件数が0になったらもっと見るボタンは表示されなくなります。
もっと見るボタンの表示・非表示
今回の解説は記事が10件ある状態での実装でしたが普通は記事数が0から始まって増えていきます。
記事の数が4件以下の場合はもっと見るボタンが必要なくなりますのでその場合はもっと見るボタンを非表示にします。
JavaScriptを↓にします。
これで完成です。