javascript - 使用 JQuery 定位下一张卡片数量

我有一个默认显示 6 张卡的模块。如果存在超过 6 张卡，则会出现加载更多按钮。现在，我没有使用 AJAX 加载下一组卡片，我有简单的 CSS 来隐藏 6 个项目( &:nth-child(1n+7){display: none;} )之后的卡片。
我想要实现的目标 :使用 JQuery，在单击按钮时，我正在尝试display: block 在接下来的 6 张卡片上。
当前结果 :目前，我有 onclick 所有 .ctaCards 都有 display: block ，所以全部加载，但我只想显示接下来的 6 个。例如，如果我总共有 16 张卡片:

6 将默认显示

在 #loadmoreBtn 单击上，显示接下来的 6 个帖子

剩下 4 个帖子仍然隐藏，再次点击按钮时会显示。

如果没有更多帖子要加载，我还希望按钮为 fadeOut。
演示:

$(function() {

  $("#loadmoreBtn").click(function(e) {
    e.preventDefault();

    // show next 6 posts
    $(".cards .ctaCard").css("display", "block");

    // if no more posts exist to load more, hide load more button
    $(this).fadeOut(300);

  });

});

.cards{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cards .ctaCard{
  background: lightgrey;
  width: 40%;
  text-align: center;
  padding: 20px;
  margin-bottom: 30px;
}

.cards .ctaCard:nth-child(1n+7){
  display: none;
}


#loadmoreBtn{
  padding: 20px;
  background: blue;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cards">

  <div class="ctaCard">
    Card 1
  </div>

  <div class="ctaCard">
    Card 2
  </div>

  <div class="ctaCard">
    Card 3
  </div>

  <div class="ctaCard">
    Card 4
  </div>

  <div class="ctaCard">
    Card 5
  </div>

  <div class="ctaCard">
    Card 6
  </div>

  <div class="ctaCard">
    Card 7
  </div>

  <div class="ctaCard">
    Card 8
  </div>

  <div class="ctaCard">
    Card 9
  </div>

  <div class="ctaCard">
    Card 10
  </div>

  <div class="ctaCard">
    Card 11
  </div>

  <div class="ctaCard">
    Card 12
  </div>

  <div class="ctaCard">
    Card 13
  </div>

</div>

<!-- this button will only appear if more than 6 cards exist. I have this markup wrapped in a HuBL if statement-->

<div class="button">
  <a id="loadmoreBtn">Load more</a>
</div>

最佳答案

您所要做的就是使用 slice() 处理前 6 个隐藏元素。
在所有元素都可见后(您可以通过简单地计算它们来获取该信息)只需隐藏按钮。

$(function() {

  $("#loadmoreBtn").click(function(e) {
    e.preventDefault();

    // show next 6 posts
    $(".cards .ctaCard:hidden").slice(0, 6).css("display", "block");

    // if no more posts exist to load more, hide load more button
    if ($(".cards .ctaCard:hidden").length === 0) {
        $(this).fadeOut(300);
    }

  });

});

.cards{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cards .ctaCard{
  background: lightgrey;
  width: 40%;
  text-align: center;
  padding: 20px;
  margin-bottom: 30px;
}

.cards .ctaCard:nth-child(1n+7){
  display: none;
}


#loadmoreBtn{
  padding: 20px;
  background: blue;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cards">

  <div class="ctaCard">
    Card 1
  </div>

  <div class="ctaCard">
    Card 2
  </div>

  <div class="ctaCard">
    Card 3
  </div>

  <div class="ctaCard">
    Card 4
  </div>

  <div class="ctaCard">
    Card 5
  </div>

  <div class="ctaCard">
    Card 6
  </div>

  <div class="ctaCard">
    Card 7
  </div>

  <div class="ctaCard">
    Card 8
  </div>

  <div class="ctaCard">
    Card 9
  </div>

  <div class="ctaCard">
    Card 10
  </div>

  <div class="ctaCard">
    Card 11
  </div>

  <div class="ctaCard">
    Card 12
  </div>

  <div class="ctaCard">
    Card 13
  </div>

</div>

<!-- this button will only appear if more than 6 cards exist. I have this markup wrapped in a HuBL if statement-->

<div class="button">
  <a id="loadmoreBtn">Load more</a>
</div>

关于javascript - 使用 JQuery 定位下一张卡片数量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/63809679/