本文讲解如何通过维护当前索引状态、优化数据结构及使用类名替代id，实现宝可梦图鉴中单个条目按序渲染与导航，避免全部数据一次性显示的问题。
本文讲解如何通过维护当前索引状态、优化数据结构及使用类名替代id，实现宝可梦图鉴中单个条目按序渲染与导航，避免全部数据一次性显示的问题。
在构建交互式宝可梦图鉴（Pokédex）时，一个常见误区是将 HTML 结构直接映射为 JavaScript 数据结构（如用 id 字符串作为字段名），或在初始化时未控制渲染范围，导致所有宝可梦信息同时展示。要实现「开机仅显示第一只（如妙蛙种子）→ 点击按钮切换下一只」的预期行为，关键在于三点：扁平化数据建模、状态化索引管理、按需 DOM 渲染。
✅ 重构数据结构：扁平、语义化、可扩展
原始代码中嵌套了 dexInfo 数组，且字段名混杂 CSS 类名（如 'grass-one'），不利于逻辑处理。推荐采用简洁、自解释的 JSON 结构：
const pokedex = [{
id: 1,
name: 'Bulbasaur',
species: 'Seed Pokemon',
height: 0.7, // 米
weight: 6.9, // 千克
description: 'A strange seed was planted on its back at birth...',
types: ['grass', 'poison']
}, {
id: 2,
name: 'Ivysaur',
species: 'Seed Pokemon',
height: 1.0,
weight: 13.0,
description: 'When the bulb on its back grows large...',
types: ['grass', 'poison']
}];? 优势：types 使用字符串数组统一表示；id 和 name 直观可读；单位标准化便于后续转换（如米→英尺）。
✅ 维护当前状态：用 currentIndex 控制显示位置
不要依赖循环遍历整个数组来“显示全部”，而应定义一个全局变量跟踪当前激活项：
let currentIndex = 0;
const entry = document.querySelector('.pkmn-entry'); // 唯一内容容器所有交互（如“上一只”“下一只”）仅修改 currentIndex，再调用 render() 刷新视图：
function navigate(button) {
const offset = button.dataset.direction === 'prev' ? -1 : 1;
// 循环切换：0 → 1 → 2 → 0 → …
currentIndex = (currentIndex + offset + pokedex.length) % pokedex.length;
render();
}该写法确保索引始终在 [0, pokedex.length) 范围内，避免越界错误。
✅ 按需渲染：精准更新 DOM 元素内容
render() 函数负责将当前宝可梦数据注入对应 DOM 节点。它不创建新元素，只更新已有 .class 选择器下的内容：
function render() {
const p = pokedex[currentIndex];
entry.querySelector('.pkmn-img').src = `images/pokemon/${p.id.toString().padStart(3, '0')}-${p.name.toLowerCase()}.png`;
entry.querySelector('.pkmn-no').textContent = p.id.toString().padStart(3, '0');
entry.querySelector('.pkmn-name').textContent = p.name;
entry.querySelector('.pkmn-specs').innerHTML = `
Species: ${p.species}<br>
Height: ${metersToFeet(p.height)}<br>
Weight: ${round(kgToLbs(p.weight), 1)} lbs
`;
entry.querySelector('.pkmn-desc').textContent = p.description;
entry.querySelector('.pkmn-types').innerHTML = p.types
.map(type => `<div class="type ${type}">${capitalize(type)}</div>`)
.join('');
}⚠️ 注意事项：
- 禁用 ID 选择器：getElementById() 难以动态适配多数据项；改用 querySelector('.class') 更灵活、可复用；
- 图片路径规范化：使用 padStart(3, '0') 生成 001-bulbasaur.png，便于文件管理；
- 类型样式解耦：.type.grass { background: #AFA; }，而非硬编码类名如 grass-one；
- 首次调用 render()：务必在脚本加载后立即执行一次（如 render(); 放在末尾），否则页面空白。
✅ 补充功能建议
- 添加 turnOnPokedex() 的开关逻辑：仅切换 .hide 类控制整体显隐，不影响内部状态；
- 引入防抖/节流处理高频点击；
- 使用 localStorage 持久化 currentIndex，重启后恢复上次位置；
- 为无障碍访问添加 aria-label 和语义化标签。
通过以上重构，你的图鉴将真正实现「单页应用式」体验：启动即见妙蛙种子，点击切换流畅自然，数据与视图职责清晰分离，也为后续扩展（搜索、过滤、动画）打下坚实基础。
