本教程探讨了在使用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 加载更多功能演示 :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 */ }$(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(); } }); }); Card 1Card 2Placeholder Card ACard 3Card 4Placeholder Card BCard 5Card 6Card 7Card 8Card 9Card 10Card 11Card 12Card 13Card 14Card 15Card 16Card 17Card 18Card 19Card 20Card 21Card 22Card 23Card 24Card 25
总结
在实现“加载更多”等动态内容加载功能时，理解jQuery选择器返回的元素集合是静态还是动态至关重要。当需要迭代处理一个不断变化的元素集合时，务必确保在每次操作后更新该集合的引用，或者在每次操作前重新查询DOM以获取最新状态。通过采用动态更新集合（hiddenCard = hiddenCard.slice(9);）的方法，我们可以构建出更高效、更可靠的“加载更多”功能，同时结合现代JavaScript的const和let以及性能考量，能够提升代码质量和用户体验。
以上就是jQuery ‘加载更多’ 功能中动态元素集合处理策略与实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591815.html
微信扫一扫 
支付宝扫一扫 
