遍历 JSON 文件以在 HTML 模态 JavaScript 中显示正确链接的数据

Question

我正在尝试使用 JSON 文件中的数据填充我的 HTML 模态，并使用 JavaScript 显示正确的数据。

所以，我想做的是，我有一个 JSON 文件，其中包含每个团队的一些数据，当我单击 HTML 中的团队名称时，我想要一个模式显示所选团队数据的弹出窗口。

模态弹窗，数据不显示

下面附上我的 JSON、HTML 和 JavaScript

JSON:

[
  {
    "team": "Liverpool",
    "teamInfo": "One"
  },
  {
    "team": "Everton",
    "teamInfo": "Two"
  }
]

HTML:

<a class="openModal" data-modal-target="#modal-liverpool">
  <span class="team-img">
    <img src="">
    <span class="team">Liverpool</span>
  </span>
</a>

<a class="openModal" data-modal-target="#modal-everton">
  <span class="team-img">
    <img src="">
    <span class="team">Everton</span>
  </span>
</a>

<!-- Modal -->
<div class="modal" id="modal-liverpool">
  <div class="header">
    <div class="title"></div>
    <button data-close-button class="close">&times;</button>
  </div>
  <div class="body"></div>
</div>
<div id="overlay"></div>

<div class="modal" id="modal-everton">
  <div class="header">
    <div class="title"></div>
    <button data-close-button class="close">&times;</button>
  </div>
  <div class="body"></div>
</div>
<div id="overlay"></div>

非常感谢！ JavaScript:

fetch('teams.json')
  .then((response) => response.json())
  .then((data) => {
    for(var x = 0; x < data.length; x++) {
      var element = document.querySelector(".title");
      element.textContent = data[x].team;
    }
  })
  .catch((error) => {
    console.error('Error:', error);
  });

Answer 1

您需要querySelectorAll

const elements = document.querySelectorAll(".title");
data.forEach((item, i) => elements[i].textContent = item.team);

const data = [{
    "team": "Liverpool",
    "teamInfo": "One"
  },
  {
    "team": "Everton",
    "teamInfo": "Two"
  }
]

const elements = document.querySelectorAll(".title");
data.forEach((item, i) => elements[i].textContent = item.team);

<a class="openModal" data-modal-target="#modal-liverpool">
  <span class="team-img">
    <img src="">
    <span class="team">Liverpool</span>
  </span>
</a>

<a class="openModal" data-modal-target="#modal-everton">
  <span class="team-img">
    <img src="">
    <span class="team">Everton</span>
  </span>
</a>

<!-- Modal -->
<div class="modal" id="modal-liverpool">
  <div class="header">
    <div class="title"></div>
    <button data-close-button class="close">&times;</button>
  </div>
  <div class="body"></div>
</div>
<div id="overlay"></div>

<div class="modal" id="modal-everton">
  <div class="header">
    <div class="title"></div>
    <button data-close-button class="close">&times;</button>
  </div>
  <div class="body"></div>
</div>
<div id="overlay"></div>

遍历 JSON 文件以在 HTML 模态 JavaScript 中显示正确链接的数据

Iterate through JSON file to show data for correct links in HTML modal with JavaScript

html

javascript

json

modal-dialog