使用slice()实现JS加载更多卡片功能失效问题排查

问题描述 #

开发博客文章展示模块，默认显示13个.resourceCard，点击「加载更多」按钮需每次额外显示9个卡片。但当前仅首次点击能显示后续9个，再次点击无法加载23号及以后的卡片；尝试使用hiddenCard.slice(x, 9)仅能输出控制台日志，功能无效。

问题根源 #

1. 静态元素集合导致更新失效：初始化时获取的hiddenCard是固定DOM元素集合，即使部分卡片被显示，该集合不会自动更新，后续点击仍操作同一批已显示元素
2. 无效变量冗余：变量x未实际参与切片逻辑，属于冗余代码
3. 隐藏状态判断滞后：判断hiddenCard.length == 0时，使用的是初始集合长度，而非当前实际隐藏的卡片数量

修复后的代码 #

JavaScript 部分 #

$(function () {
  var loadmoreBtn = $('.resourceListing__loadmore');

  loadmoreBtn.on('click', function (e) {
    e.preventDefault();
    // 每次点击重新获取当前隐藏的卡片
    var hiddenCard = $('.insertCard:hidden');
    // 取前9个隐藏卡片显示
    hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex");
    // 实时检查剩余隐藏卡片，无内容时隐藏按钮
    if ($('.insertCard:hidden').length == 0) {
      loadmoreBtn.hide();
    }
  });
});

原有CSS（无需修改） #

: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;
}
.resourceListing .insertCard:nth-child(n+16) {
  display: none;
}

.insertCard {
  display: flex;
}
.insertCard--flex {
  display: flex !important;
}

原有HTML（无需修改） #

<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">

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 1</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 2</div>
      </div>

      <div class="col-4 insertCard">
        <div class="placeholderCard">This card is not part of the slice</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 3</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 4</div>
      </div>

      <div class="col-4 insertCard">
        <div class="placeholderCard">This card is not part of the slice</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 5</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 6</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 7</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 8</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 9</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 10</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 11</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 12</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 13</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 14</div>
      </div>

      <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 18</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 19</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 20</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 21</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 22</div>
      </div>
      
      <div class="col-4 insertCard">
        <div class="resourceCard">Card 23</div>
      </div>

      <div class="col-4 insertCard">
        <div class="resourceCard">Card 24</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>

修复说明 #

• 每次点击时重新查询当前隐藏卡片，确保操作最新未显示元素
• 移除冗余变量x，简化逻辑
• 实时检查剩余隐藏卡片数量，确保按钮在无内容可加载时正确隐藏

内容的提问来源于stack exchange，提问作者Freddy