Bootstrap 5 第二个模态框无法加载显示PokeAPI接口返回的数据问题求助

核心问题原因 #

• 重复调用loadStats方法：showStatModal内部重复发起接口请求，没有复用loadStatDetails中已经获取到的数据
• 触发事件未绑定：没有给打开第二个模态框的交互元素绑定loadStatDetails调用逻辑
• 标签语法错误：属性展示的<p>标签未正确闭合，可能导致DOM渲染异常
• （可选）仅存储了属性名未存储属性数值，不符合展示属性数值的需求
• 可能存在模态框DOM的id/class拼写不匹配问题

修复步骤 #

1. 修正模态框渲染逻辑 #

删除showStatModal中重复的接口请求，修复标签错误：

function showStatModal(item) {
  let StatmodalBody = $(".Statmodal-body");
  let StatmodalTitle = $(".Statmodal-title");

  // 清空模态框原有内容
  StatmodalTitle.empty();
  StatmodalBody.empty();

  // 构造内容元素
  let nameElement = $("<h1>" + item.name + "</h1>");
  let statsElement = $("<p>" + item.stats + "</p>");

  StatmodalTitle.append(nameElement);
  StatmodalBody.append(statsElement);

  $('#my-Statmodal').modal('show');
}

2. 调整属性数据存储逻辑（补充数值展示） #

修改loadStats方法，同时存储属性名和对应数值：

function loadStats(item) {
  let url = item.detailsUrl;
  return fetch(url).then(function (response) {
    return response.json();
  }).then(function (details) {
    item.stats = [];
    for (var i = 0; i < details.stats.length; i++) {
      // 同时拼接属性名和基础数值
      item.stats.push(`${details.stats[i].stat.name}: ${details.stats[i].base_stat}`);
    }
    item.stats = item.stats.join('<br>');
  }).catch(function (e) {
    console.error(e);
  });
}

3. 绑定第二个模态框的触发事件 #

在第一个模态框的渲染逻辑（即showDetails方法）中添加打开第二个模态框的按钮，并绑定事件：

// 放在showDetails方法中，构建完第一个模态框的内容后添加
let viewStatBtn = $('<button class="btn btn-primary mt-3">查看属性数值</button>');
viewStatBtn.on('click', function() {
  // 传入当前宝可梦的item对象
  pokemonRepository.loadStatDetails(item);
});
// 把按钮追加到第一个模态框的内容区域
modalBody.append(viewStatBtn);

4. 校验DOM结构 #

确认第二个模态框的HTML结构和class/id匹配：

<div class="modal fade" id="my-Statmodal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title Statmodal-title"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body Statmodal-body"></div>
    </div>
  </div>
</div>

如果使用的是Bootstrap 4版本，把关闭按钮的属性换成data-dismiss="modal"即可。

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