PHP初心者のため、PHPでデータを呼び起こしている場合のもっと見るボタンの設置の仕方がわかりません。

html
1<div class="inner">
2<?php
3if(!empty($pageData->privilege_list)) {
4				foreach ($pageData->privilege_list as $v) {
5					
6					for ($i = 0; $i < 9; $i++) {
7						if ($keyArray[$i] == $businessCodePrivilege) {
8							
9						}
10					}
11// 当てはまらない場合
12					<?php
13				}
14			} else {
15				echo "<p>申し訳ございません。情報はありません。</p>";
16			}
17?>
18			</div>

上記のようにリストを生成しております。
これを５件出してあとは非表示→もっと見るボタンで表示（できれば非表示もつけたい）
その場合はどのようにjqueryを設定すれば良いのでしょうか。
ご教授お願いいたします。

kei344

2018/12/20 06:56

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

perican143

2018/12/20 07:08

ありがとうございます。調べながらですが、以下のコードを参考にしています。 const defaultDispCnt = 5; // 初期表示件数 const addDispCnt = 3; // 追加表示件数 (function ($) { $(function () { let maxDispCnt = 0; // 最大表示件数 let currentDispCnt = 0; // 現在の表示件数 let tileList = $('#tileList').children('li'); // 一覧のli子要素をすべて取得 // 一覧の初期表示 $(tileList).each(function (i, elem) { // 初期表示件数のみ表示 if (i < defaultDispCnt) { $(this).show(); currentDispCnt++; } maxDispCnt++; // もっと見るボタンを表示 let displayed = 0; if (maxDispCnt > currentDispCnt && !displayed) { $('.readMoreBtn').show(); displayed = 1; } }); // もっと見るボタンクリックイベント $('.readMoreBtn').click(function () { let newCount = currentDispCnt + addDispCnt; // 新しく表示する件数 // 新しく表示する件数のみ表示 $(tileList).each(function (i, elem) { if (currentDispCnt <= i && i < newCount) { $(this).show(); currentDispCnt++; } }); // もっと見るボタンを非表示 if (maxDispCnt <= newCount) { $(this).hide(); } return false; }); }); }(jQuery)); ただこちらは、HTMLで作られたコードを元に作っておりますが、今回はPHPのデータリストを５件表示して、もっと見るボタンで３件ずつ表示していくのでその部分がどのように設置していいか初心者のためわかりません。

kei344

2018/12/20 07:10

（質問文は編集できます）この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

m.ts10806

2018/12/20 07:40

タグに「PHP」を追加しておいてください。

行動規範の内容に同意します

回答1件

ベストアンサー

サーバー側の処理に関しては２パターン考えられます

(1)すべてのデータを出力してしまってクライアント側のjsなどでデータを絞って表示する
(2)最低限のデータを出力し、クライアントからの追加表示の希望を受けられるようapiを用意しておく
クライアントからの要求はajaxで処理し、jsonかhtml形式で返すようにする

sample

要jQuery

簡単なsampleだけ載せておきます。
もっと見るをクリックすると、残り全部を表示していますが
5件ずつ徐々に見えるようにする場合などなにか特別な仕様があるなら提示下さい

javascript
1<script>
2$(function(){
3  $('.contents:gt(4)').hide();
4  $('.contents:eq(4)').after($('<p>≫ もっと見る</p>').on('click',function(){
5    $('.contents').show();
6    $(this).remove();
7  }));
8});
9</script>
10<div id="inner">
11<p class="contents">1</p>
12<p class="contents">2</p>
13<p class="contents">3</p>
14<p class="contents">4</p>
15<p class="contents">5</p>
16<p class="contents">6</p>
17<p class="contents">7</p>
18<p class="contents">8</p>
19<p class="contents">9</p>
20<p class="contents">10</p>
21<p class="contents">11</p>
22<p class="contents">12</p>
23<p class="contents">13</p>
24</div>