jQuery ‘加载更多’ 功能中动态元素集合处理策略与实践-html教程-PHP中文网

jQuery '加载更多' 功能中动态元素集合处理策略与实践

本教程探讨了在使用jquery实现'加载更多'功能时，点击后仅显示首批新元素而非后续批次的问题。核心在于对已隐藏元素集合的静态引用。文章提供了两种解决方案：一是通过slice()方法动态更新元素集合，二是每次点击时重新查询dom，并强调了使用const/let等现代javascript实践，旨在帮助开发者构建高效且可维护的动态内容加载机制。

引言：理解“加载更多”机制

在现代网页设计中，“加载更多”功能是一种常见的用户体验模式，它允许页面在初始加载时只显示一部分内容，当用户需要查看更多时，通过点击按钮动态加载额外的内容，从而避免一次性加载过多数据导致页面卡顿。通常，这种功能通过JavaScript来控制隐藏元素的显示。

问题分析：为何后续卡片无法显示？

原始代码在实现“加载更多”功能时，遇到了一个常见但关键的问题：在第一次点击“加载更多”按钮后，后续的点击无法显示更多的卡片。问题根源在于对隐藏元素集合的静态引用。

在初始加载时，var hiddenCard = $('.insertCard:hidden'); 这行代码会获取当前页面上所有处于隐藏状态的.insertCard元素，并将其存储在hiddenCard变量中。这个变量是一个jQuery对象，代表了一个静态的元素集合。

当用户第一次点击“加载更多”按钮时，代码会从hiddenCard集合中取出前9个元素并显示它们。然而，hiddenCard变量本身并没有因为这些元素的显示而更新。在后续的点击中，hiddenCard仍然引用的是最初的那个包含所有未显示元素的集合。因此，hiddenCard.slice(0, 9) 每次都会尝试从这个未改变的集合的开头再次取出相同的9个元素，但这些元素在第一次点击时已经被显示了，所以后续点击看起来没有效果。

简而言之，问题出在：hiddenCard 变量在初始化后没有随着已显示元素的减少而动态更新。

解决方案一：动态更新元素集合

要解决这个问题，最直接且推荐的方法是在每次显示完一批卡片后，更新hiddenCard变量，使其只包含那些尚未显示的卡片。这可以通过再次使用slice()方法来实现。

每次显示9个卡片后，我们应该将这9个卡片从hiddenCard集合中“移除”，以便下一次操作时从剩余的隐藏卡片中选择。

$(function () {
  const loadmoreBtn = $('.resourceListing__loadmore');
  let hiddenCard = $('.insertCard:hidden'); // 使用let以便后续重新赋值

  loadmoreBtn.on('click', function (e) {
    e.preventDefault();

    // 显示当前hiddenCard集合中的前9个元素
    hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex");

    // 更新hiddenCard集合：移除已经显示的9个元素
    // 这样hiddenCard就只包含剩余未显示的元素了
    hiddenCard = hiddenCard.slice(9);

    // 如果没有更多隐藏卡片，则隐藏“加载更多”按钮
    if (hiddenCard.length === 0) {
      loadmoreBtn.hide();
    }
  });
});

登录后复制

原理说明： 通过在每次点击后执行 hiddenCard = hiddenCard.slice(9);，我们将hiddenCard变量重新赋值为原集合中从第9个元素开始的所有元素。这意味着，hiddenCard现在是一个新的jQuery对象，其中不包含刚刚被显示的那9个卡片。这样，在下一次点击时，hiddenCard.slice(0, 9) 就会从新的、更小的、尚未显示的卡片集合中取出新的9个卡片。

解决方案二：每次点击时重新查询DOM

另一种解决方式是每次点击“加载更多”按钮时，都重新查询DOM以获取当前所有隐藏的卡片。这种方法确保了hiddenCard变量总是最新的。

集简云

软件集成平台，快速建立企业自动化与智能化

查看详情

$(function () {
  const loadmoreBtn = $('.resourceListing__loadmore');
  // 注意：这里不再在外部定义hiddenCard，而是在每次点击时获取

  loadmoreBtn.on('click', function (e) {
    e.preventDefault();

    // 每次点击时重新查询DOM，获取当前所有隐藏的卡片
    const hiddenCard = $('.insertCard:hidden');

    // 显示当前hiddenCard集合中的前9个元素
    hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex");

    // 再次检查是否还有隐藏卡片，以便决定是否隐藏按钮
    // 注意：这里需要再次查询，因为上面的fadeIn操作可能需要一些时间来更新DOM的:hidden状态
    // 或者，更可靠的做法是基于hiddenCard.slice(0, 9)操作后的剩余元素数量来判断
    if (hiddenCard.length <= 9) { // 如果剩余的隐藏卡片少于或等于9个（即本次操作后将全部显示）
      loadmoreBtn.hide();
    }
  });
});

登录后复制

原理说明： 将 const hiddenCard = $('.insertCard:hidden'); 移动到点击事件处理函数内部，确保了每次点击时，jQuery都会重新扫描DOM，找出所有当前处于隐藏状态的.insertCard元素。这样，hiddenCard变量总是最新的，并且不会引用到已经被显示出来的卡片。

最佳实践与注意事项

使用 const 和 let： 现代JavaScript推荐使用 const 和 let 替代 var。
- const 用于声明常量，一旦赋值不能再更改。
- let 用于声明变量，其作用域是块级的，且可以重新赋值。在我们的场景中，loadmoreBtn 应该使用 const，而 hiddenCard 如果需要被重新赋值（如解决方案一），则应使用 let。如果每次都重新查询（如解决方案二），则在函数内部使用 const 即可。
性能考量：
- 解决方案一（动态更新集合） 通常在性能上更优。它只在初始化时进行一次DOM查询，后续操作主要在内存中的jQuery对象上进行slice()操作，这比频繁地重新查询整个DOM（解决方案二）要快，尤其是在页面元素较多时。
- 解决方案二（每次重新查询） 在元素数量较少或DOM结构不经常变化时可能差别不大，但如果DOM非常复杂或元素数量庞大，频繁的DOM查询可能会导致性能下降。
用户体验与无障碍性：
- 加载状态： 在内容加载时，可以考虑显示一个加载指示器（如加载动画），以提升用户体验。
- 键盘导航： 确保“加载更多”按钮可以通过键盘焦点访问和激活。
- 无障碍性： 为动态加载的内容考虑ARIA属性，例如，告知屏幕阅读器内容已更新。
初始显示数量的CSS控制： 在提供的CSS中，使用了 :nth-child(n+16) 来隐藏初始卡片。这意味着从第16个卡片开始隐藏。如果你的初始显示数量是13个，那么应该隐藏从第14个卡片开始的元素。 nth-child(n+X) 表示从第X个元素开始匹配。如果想显示13个，那么X应该是14。
```
.resourceListing .insertCard:nth-child(n+14) { /* 隐藏从第14个卡片开始的所有卡片 */
  display: none;
}
```
登录后复制
请根据实际需求调整这个CSS选择器，确保初始显示数量与JavaScript逻辑匹配。

完整示例

以下是结合了推荐解决方案（动态更新元素集合）和最佳实践的完整代码示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 加载更多功能演示</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <style>
    :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;
      font-size: 1.2em;
      color: var(--navy);
      text-decoration: underline;
    }
    /* 初始隐藏从第14个卡片开始的所有卡片，以显示前13个 */
    .resourceListing .insertCard:nth-child(n+14) {
      display: none;
    }

    .insertCard {
      display: flex; /* 默认显示为flex，被:nth-child(n+14)覆盖 */
    }
    .insertCard--flex {
      display: flex !important; /* 强制显示为flex */
    }
  </style>
</head>
<body>

  <main class="resourceListing">
    <div class="container">
      <div class="row resourceListing__posts">

        <!-- 示例卡片，共25个 -->
        <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">Placeholder Card A</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">Placeholder Card B</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>

  <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>
  <script>
    $(function () {
      const loadmoreBtn = $('.resourceListing__loadmore');
      let hiddenCard = $('.insertCard:hidden'); // 初始获取所有隐藏卡片

      loadmoreBtn.on('click', function (e) {
        e.preventDefault();

        // 每次显示9个卡片
        hiddenCard.slice(0, 9).fadeIn().addClass("insertCard--flex");

        // 更新 hiddenCard 集合，移除已显示的卡片
        hiddenCard = hiddenCard.slice(9);

        // 如果没有更多隐藏卡片，则隐藏“加载更多”按钮
        if (hiddenCard.length === 0) {
          loadmoreBtn.hide();
        }
      });
    });
  </script>
</body>
</html>

登录后复制

总结

在实现“加载更多”等动态内容加载功能时，理解jQuery选择器返回的元素集合是静态还是动态至关重要。当需要迭代处理一个不断变化的元素集合时，务必确保在每次操作后更新该集合的引用，或者在每次操作前重新查询DOM以获取最新状态。通过采用动态更新集合（hiddenCard = hiddenCard.slice(9);）的方法，我们可以构建出更高效、更可靠的“加载更多”功能，同时结合现代JavaScript的const和let以及性能考量，能够提升代码质量和用户体验。

以上就是jQuery ‘加载更多’ 功能中动态元素集合处理策略与实践的详细内容，更多请关注php中文网其它相关文章！