文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用slice() JS显示更多卡不工作

问使用slice() JS显示更多卡不工作
EN

Stack Overflow用户
提问于 2022-08-29 12:53:18
回答 4查看 84关注 0票数 1

我有一个章节，我要拉博客文章，并展示他们的所有。默认情况下，会显示13个.resourceCard，然后单击load，将显示多9个。

然而，当单击load按钮时，它只显示下一个9，但在随后的单击中没有显示任何内容(不显示卡片23+)。

使用hiddenCard.slice(x, 9)也不能工作，因为只有控制台日志才会出现。

我的逻辑在哪里崩溃？

演示

​

代码语言：javascript
复制
$(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.slice(0, 9).fadeIn().addClass("insertCard--flex");
    if(hiddenCard.length == 0){
      loadmoreBtn.hide();
    }
  });

});
代码语言：javascript
复制
: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;
}
代码语言：javascript
复制
<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>

​

javascript
html
jquery
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2022-08-29 13:08:12

这里的问题是，你得到了一次隐藏卡的列表。然后在不更新列表的情况下处理该列表中的9个项。所以下次再处理同样的9张卡片。

若要解决需要更新列表的问题，请使用：

代码语言：javascript
复制
hiddenCard = hiddenCard.slice(9);

​

代码语言：javascript
复制
$(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);
    hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex")
    //update the list
    hiddenCard = hiddenCard.slice(9);
    if(hiddenCard.length == 0){
      loadmoreBtn.hide();
    }
  });

});
代码语言：javascript
复制
: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;
}
代码语言：javascript
复制
<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>

​

或者，您可以将var hiddenCard = $('.insertCard:hidden');移动到click函数中。

你应该使用const和let而不是var

票数 2
EN

Stack Overflow用户

发布于 2022-08-29 13:14:43

您可以从删除这一行开始：

代码语言：javascript
复制
var x = 13;

因为不需要柜台！然后移动这一行：

代码语言：javascript
复制
var hiddenCard = $('.insertCard:hidden');

在以下之后开始click事件：

代码语言：javascript
复制
e.preventDefault();

现在，随着这种变化，每次单击Load More按钮时，您都会创建一个新的隐藏卡集合，然后生成前9个隐藏卡的一个片段。

访问jQuery文档：

. .slice()方法构造一个新的jQuery对象，该对象包含由start和(可选) end参数指定的元素的子集。

更新

在所有这些更改之后，要隐藏加载模式按钮，需要将if语句更新为如下所示：

代码语言：javascript
复制
if(hiddenCard.slice(9).length == 0){
    loadmoreBtn.hide();
}

祝好运!

票数 1
EN

Stack Overflow用户

发布于 2022-08-29 13:10:09

在编写代码码页之后，我注意到在加载更多的代码后，您没有更新'hiddenCard‘数组。如果您只是更新数组，您的代码将工作。

​

代码语言：javascript
复制
$(function () {
  var loadmoreBtn = $('.resourceListing__loadmore');
  var x = 13;

  loadmoreBtn.on('click', function (e) {
    e.preventDefault();
    x = x + 9;
   var hiddenCard = $('.insertCard:hidden');
   hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex");
   hiddenCard = $('.insertCard:hidden');

   if(!hiddenCard.length){
     loadmoreBtn.hide();
   }
  });

});
代码语言：javascript
复制
:root {
  --black: #000000;
  --white: #FFFFFF;
  --navy: #0E185F;
}

.placeholderCard,
.resourceCard {
  padding: 30px;
  border: 1px solid var(--black);
  margin-bottom: 15px;
  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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73529105

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档