本教程探讨了在使用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逻辑匹配。
完整示例
以下是结合了推荐解决方案（动态更新元素集合）和最佳实践的完整代码示例。
jQuery 加载更多功能演示
总结
在实现“加载更多”等动态内容加载功能时，理解jQuery选择器返回的元素集合是静态还是动态至关重要。当需要迭代处理一个不断变化的元素集合时，务必确保在每次操作后更新该集合的引用，或者在每次操作前重新查询DOM以获取最新状态。通过采用动态更新集合（hiddenCard = hiddenCard.slice(9);）的方法，我们可以构建出更高效、更可靠的“加载更多”功能，同时结合现代JavaScript的const和let以及性能考量，能够提升代码质量和用户体验。
