久々更新

お久しぶりです。２４ブロです。

今日は久しぶりにブログを更新しようと思います。

実は、わたくしプログラミングスクール[tech expert]でただいま就職活動をしております。

そして、なんと明日初面接！！！（まぁ正確には、面談）

今からもぉちょっとずつ緊張しております。

でも、ちょっと楽しみでもあります。

なんせ、また新しい出会いが間違いなくできるから😆

面接って久しぶりだけど、リラックスしてあっちの企業にも迷惑かけないようにしっかり自分の思いを伝えられるようにしよう！

楽しんできます！

☆今日の学び☆

最近は、カリキュラムも終わり実装に関しては自分の好きなようにコードを書いているのですが、JAVASCRIPTが最近のお気に入り。

やっぱりなんだかんだ、フロントの動きをいじるの好きなんだよなぁ

今日、いじっているのは大手ECサイトとかでもよく用いられる

"『もっとみる』ボタンを押すと、商品が追加で表示される機能 "

コードはこんな感じ↓

const defaultDispCnt = 12; // 初期表示件数
const addDispCnt = 12;     // 追加表示件数
(function ($) {
  $(function () {
    let maxDispCnt = 0;     // 最大表示件数
    let currentDispCnt = 0; // 現在の表示件数
    let tileList = $('#searchResultList').children('li.search_item'); // 一覧のli子要素をすべて取得

    // 一覧の初期表示
    $(tileList).each(function (i, elem) {
      // 初期表示件数のみ表示
      if (i < defaultDispCnt) {
        $(this).show();
        currentDispCnt++;
      }
      maxDispCnt++;

      // もっと見るボタンを表示
      let displayed = 0;
      if (maxDispCnt > currentDispCnt && !displayed) {
        $('.firstData .trigger').show();
        displayed = 1;
      }
    });

    // もっと見るボタンクリックイベント
    $('.firstData .trigger').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));

このJAVASCRIPTのコードの流れでなんとか実装できました！

まぁできれば『閉じるボタン』も追加したいけどw

ポイントは、//新しく表示件数のみ表示する ところで

①現在の表示件数が現在のリスト数以下であるときと 新しく表示する件数がリスト数より多い時

②最大表示件数が新しく表示する件数以下である時

と条件分岐して、処理を変えたところがポイントです。

これで、もっと見るボタン消えます（.hide）

という感じで実装してみました。

参考程度に

おしまい