使用jQuery实现动态“加载更多”功能详解

$(function () {
  var loadmoreBtn = $('.resourceListing__loadmore');
  var hiddenCard = $('.insertCard:hidden'); // 静态集合
  var x = 13; // 初始显示的卡片数量，此处并非直接用于隐藏逻辑

  loadmoreBtn.on('click', function (e) {
    e.preventDefault();
    x = x + 9; // 更新计数器，但未影响hiddenCard集合
    console.log("click");
    hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex"); // 始终处理hiddenCard的前9个
    if(hiddenCard.length == 0){ // 这个判断也基于静态集合
      loadmoreBtn.hide();
    }
  });
});

$(function () {
  var loadmoreBtn = $('.resourceListing__loadmore');
  var hiddenCard = $('.insertCard:hidden'); // 初始获取所有隐藏卡片
  var x = 13; // 初始显示的卡片数量

  loadmoreBtn.on('click', function (e) {
    e.preventDefault();
    x = x + 9;
    console.log("click", hiddenCard.length);

    // 1. 获取当前需要显示的9张卡片
    var cardsToShow = hiddenCard.slice(0, 9);
    cardsToShow.fadeIn().addClass("insertCard--flex");

    // 2. 更新 hiddenCard 变量，移除已显示的卡片
    // hiddenCard 重新赋值为剩余的隐藏卡片
    hiddenCard = hiddenCard.slice(9);

    // 3. 检查是否还有更多卡片可加载
    if (hiddenCard.length === 0) {
      loadmoreBtn.hide();
    }
  });
});

$(function () {
  var loadmoreBtn = $('.resourceListing__loadmore');
  var x = 13; // 初始显示的卡片数量

  loadmoreBtn.on('click', function (e) {
    e.preventDefault();
    x = x + 9;

    // 每次点击时都重新查询当前所有隐藏的卡片
    var hiddenCard = $('.insertCard:hidden'); 
    console.log("click", hiddenCard.length);

    hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex");

    // 重新查询后，再次检查是否还有更多卡片可加载
    // 注意：这里需要再次查询，或者判断hiddenCard.length在显示操作之后
    if ($('.insertCard:hidden').length === 0) { // 再次查询以确保准确性
      loadmoreBtn.hide();
    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<main class="resourceListing">
  <div class="container">
    <div class="row resourceListing__posts">
      <!-- 示例卡片，其中第16个及以后的卡片会通过CSS默认隐藏 -->
      <div class="col-4 insertCard">
        <div class="resourceCard">Card 1</div>
      </div>
      <!-- ... (中间省略更多卡片，直至Card 15) ... -->
      <div class="col-4 insertCard">
        <div class="resourceCard">Card 15</div>
      </div>
      <div class="col-4 insertCard">
        <div class="resourceCard">Card 16</div>
      </div>
      <div class="col-4 insertCard">
        <div class="resourceCard">Card 17</div>
      </div>
      <!-- ... (更多隐藏卡片) ... -->
      <div class="col-4 insertCard">
        <div class="resourceCard">Card 25</div>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <a class="resourceListing__loadmore">Load more</a>
      </div>
    </div>
  </div>
</main>

:root {
  --black: #000000;
  --white: #FFFFFF;
  --navy: #0E185F;
}

.placeholderCard,
.resourceCard {
  padding: 60px;
  border: 1px solid var(--black);
  margin-bottom: 30px;
  width: 100%;
}

.placeholderCard {
  background: var(--navy);
  color: var(--white);
  padding: 20px;
}

.resourceListing {
  padding: 80px 0;
}
.resourceListing__loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0;
  cursor: pointer;
}
/* 初始隐藏从第16个元素开始的所有.insertCard */
.resourceListing .insertCard:nth-child(n+16) {
  display: none;
}

.insertCard {
  display: flex; /* 默认显示为flex，与fadeIn后的效果一致 */
}
.insertCard--flex {
  display: flex !important; /* 确保显示为flex，覆盖可能的其他样式 */
}