精灵宝可梦图鉴（Pokedex）数组调用问题：启动全显示而非仅妙蛙种子

问题核心是没有按宝可梦维度分组DOM元素，且初始逻辑一次性移除了多个元素的隐藏类，导致所有内容同时显示。按以下步骤修改：

1. 修复HTML结构与默认隐藏状态 #

把单只宝可梦的所有相关元素（图片、编号、描述、属性）包裹在独立容器中，默认全部隐藏（通过hide类）：

<!-- 先定义全局隐藏类的CSS -->
<style>
.hide {
  display: none;
}
</style>

<!-- 每只宝可梦的内容封装在单独容器里 -->
<div class="pokemon-card hide" id="bulbasaur-card">
  <img src="images/pokemon/bulbasaur.png" width="250" height="220">
  <div><strong>001</strong></div>
  <div>Bulbasaur</div>
  <div>
    Species: Seed Pokemon<br><br>
    Height: 2'04<br><br>
    Weight: 15.2lbs(6.9kg)
  </div>
  <div>
    A strange seed was planted on<br><br> its back at birth. The plant<br><br> sprouts and grows with this<br><br> Pokémon.
  </div>
  <div class="grass-one">Grass</div>
  <div class="poison-two">Poison</div>
</div>

<!-- 后续新增宝可梦都用相同结构 -->
<div class="pokemon-card hide" id="ivysaur-card">
  <!-- 妙蛙草的内容 -->
</div>

注意：你原HTML里有语法错误：<div\>应该改为</div>，需修正避免DOM解析异常。

2. 优化JavaScript逻辑 #

修改数据结构，添加对应宝可梦容器的ID，初始化当前显示索引，只在启动时显示第一只宝可梦：

const pokedex = [
  {
    pokemon: 'bulbasaur',
    cardId: 'bulbasaur-card', // 新增：对应DOM容器的ID
    dexInfo: [
      { dexName: 'bulbasaur-name' },
      { specs: 'bulbasaur-specs' },
      { desc: 'bulbasaur-desc' }
    ],
    dexNumber: 'bulbasaur-no',
    primaryType: 'grass-one',
    secondaryType: 'poison-two'
  }
  // 其他宝可梦数据
];

// 全局变量：记录当前显示的宝可梦索引
let currentIndex = 0;

function turnOnPokedex() {
  console.log('turn-on');
  // 仅显示初始的妙蛙种子容器
  const initialCard = document.getElementById(pokedex[currentIndex].cardId);
  initialCard.classList.remove('hide');
  
  // 初始化后续切换逻辑（如果需要）
}

// 实现宝可梦切换逻辑（示例）
function nextPokemon() {
  // 隐藏当前显示的宝可梦
  const currentCard = document.getElementById(pokedex[currentIndex].cardId);
  currentCard.classList.add('hide');
  
  // 切换到下一只（循环切换）
  currentIndex = (currentIndex + 1) % pokedex.length;
  
  // 显示下一只宝可梦
  const nextCard = document.getElementById(pokedex[currentIndex].cardId);
  nextCard.classList.remove('hide');
}

3. 为什么原来的代码会全部显示？ #

你原代码中turnOnPokedex函数一次性移除了pokemonImage、pokemonInfo等多个元素的hide类，但这些元素没有按宝可梦分组——当后续新增其他宝可梦的同类元素时，所有元素的隐藏状态都会被移除，导致全部内容同时显示。

通过按宝可梦分组容器，我们只需要操作单个容器的隐藏状态，就能精准控制单只宝可梦的显示/隐藏。

内容的提问来源于stack exchange，提问作者ryanl