本文介绍如何通过 jQuery 实现点击“Next”或“Back”按钮在多个 .entry 区块间顺序切换，避免依赖脆弱的 DOM 结构，提供健壮、可维护的分步导航方案。
本文介绍如何通过 jquery 实现点击“next”或“back”按钮在多个 `.entry` 区块间顺序切换，避免依赖脆弱的 dom 结构，提供健壮、可维护的分步导航方案。
在构建多步骤内容页（如博客连载、表单向导或教程分页）时，常需隐藏除当前项外的所有区块，并通过按钮控制导航。原始思路——用 $(this).parent().hide().next().show() ——看似简洁，但极易失效：一旦 HTML 结构微调（例如插入注释、空格、包装容器或调整按钮位置），.next() 就可能选不到目标 .entry，导致逻辑中断。
更可靠的做法是脱离 DOM 邻接关系，转而基于索引统一管理所有目标元素。以下是优化后的完整实现：
✅ 推荐方案：索引驱动的导航控制
<!-- 引入 jQuery（建议放在 <head> 或页面底部） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- 内容区块：所有 .entry 初始仅第一个可见 --><div class="entry"> <p>paragraph text 1</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4"><img src="https://img.php.cn/upload/manual/001/431/639/6a21619eac924328.png" alt="jQuery 1.12.4" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="overflowclass">jQuery 1.12.4</a> <p class="overflowclass">jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。</p> </div> <a rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <button class="next">Next</button> </div> <div class="entry" style="display: none;"> <p>paragraph text 2</p> <button class="back">Back</button> <button class="next">Next</button> </div> <div class="entry" style="display: none;"> <p>paragraph text 3</p> <button class="back">Back</button> <!-- 最后一页无需 Next 按钮，提升用户体验 --> </div>
.entry {
text-align: left;
padding: 0 10px 1px;
font-size: 15px;
font-family: "Book Antiqua", serif;
width: 550px;
height: 500px;
overflow: auto;
margin: auto;
}
$(document).ready(function() {
const $entries = $('.entry'); // 缓存所有 .entry 元素（jQuery 对象）
let currentIndex = 0;
// Next 按钮逻辑
$('.next').on('click', function(e) {
e.preventDefault(); // 防止意外默认行为（如表单提交）
if (currentIndex 0) {
currentIndex--;
$entries.hide().eq(currentIndex).show();
}
});
});
? 关键改进点说明
-
结构解耦：不再依赖 .parent() 和 .next() 的 DOM 层级关系，即使 .entry 外层包裹
或中间插入广告 ，逻辑依然健壮。- 边界防护：通过 if (currentIndex 0) 防止越界操作，避免显示空白或报错。
- 性能优化：$entries.hide().eq(currentIndex).show() 是链式调用，比循环 .hide() 更高效；且 $entries 仅查询一次，减少 DOM 查找开销。
- 用户体验增强：最后一项移除 Next 按钮、首项移除 Back 按钮（示例中已体现），或添加禁用状态（如 $(this).prop('disabled', true)），让界面更直观。
⚠️ 注意事项
- 确保 jQuery 在脚本执行前已加载（推荐将 <script> 放在 </script>
