javascript - 如何设置 API 以在正确的播放器下显示详细信息

Question

我正在尝试设计一个包含足球运动员详细信息和图像的网页，但是，他们的姓名和年龄不会出现在球员的下方。

下面我粘贴我的代码和目前正在发生的事情的图像。

HTML：

<div class="squad-list">
        <h2 class="squad-goalkeepers-heading"></h2>
        <ul class="squad-list__players">
          <li  id="goalkeepers">
            <div class="squad-list__item-link">
              <div id="image" class="image"></div>
              <div id="details" class="details">
                <div class="r">
                  <p class="name"></p>
                </div>
                <div class="r">
                  <p class="age"></p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

JavaScript：

var apiKey = '<API_KEY_HERE>';
var host = 'api-football-v1.p.rapidapi.com';
var playersResponse = null;
var playerData = null;

function requestEnglandSquad() {
  fetch('https://api-football-v1.p.rapidapi.com/v3/players?team=10&season=2020', {
    headers: {
      'x-rapidapi-key': apiKey,
      'x-rapidapi-host': host
    }
  })
  .then((response) => response.json())
  .then((data) => {
    console.log('Data: ', data);

    playersResponse = data.response;
    playersResponse.forEach(inputPlayers);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
}

function inputPlayers(data) {
  playerData = data.player;

  var goalkeepers = document.querySelector("#goalkeepers");
  var goalkeepersImage = document.querySelector("#goalkeeperImage");
  var goalkeepersName = document.querySelector(".name");
  var goalkeepersAge = document.querySelector(".age");
  
  var image = document.createElement("img");
  var name = document.createElement("p");
  var age = document.createElement("p");

  if (playerData.id == 2) {
    image.src = playerData.photo;
    image.classList.add("player-image");
    image.alt = "Image of " + playerData.name;
    goalkeepersImage.appendChild(image);

    name.textContent = playerData.name;
    name.classList.add("player-name");
    goalkeepersName.appendChild(name);

    age.textContent = "Age: " + playerData.age;
    age.classList.add("player-age");
    goalkeepersAge.appendChild(age);
  }

  if (playerData.id == 3) {
    image.src = playerData.photo;
    image.classList.add("player-image");
    image.alt = "Image of " + playerData.name;
    goalkeepersImage.appendChild(image);

    name.textContent = playerData.name;
    name.classList.add("player-name");
    goalkeepersName.appendChild(name);

    age.textContent = "Age: " + playerData.age;
    age.classList.add("player-age");
    goalkeepersAge.appendChild(age);
  }
}

CSS：

.squad-list {
  background-color: #cfdae8;
  display: block;
  margin-left: -15px;
  margin-left: -1.5rem;
  margin-right: -15px;
  margin-right: -1.5rem;
}

.squad-list__players {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 3rem;
  overflow: visible;
  flex-direction: row;
}

.squad-list__item-link:before {
    left: 50%;
    top: 0;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
}

.squad-list__item-link {
background-color: #fff;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    vertical-align: middle;
}

.squad-list__item-link:after {
    height: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.image {
    display: flex;
    margin: 0 auto;
    width: 98%;
    position: relative;
}

.details {
      align-items: center;
    background-color: #fff;
    color: #212e65;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
}

.details .r {
    margin: 0;
    opacity: 1;
    text-align: center;
    transition: opacity .8s ease-in-out;
    width: 100%;
}

这是正在发生的事情的图像：

如您所见，名称显示在彼此下方，并且年龄相同。但是，我想看到 J.Butland Age:28 和 J.Pickford Age:27。

非常感谢

标签： javascripthtmlcssapi

Answer 1

您可以使用像Handlebars.js这样的模板引擎来渲染每个播放器。我删除了一堆不必要的东西以减少混乱。

此外，尽可能避免重复使用 ID；尝试改用一个类。

注意：确保您提供有效的 API 密钥来运行下面的示例。

var apiKey = '<API_KEY_HERE>';
var host = 'api-football-v1.p.rapidapi.com';

var playerInfoTemplate = document.querySelector('#player-info').innerHTML;
var renderPlayerInfo = Handlebars.compile(playerInfoTemplate);

function requestSquad(team, season) {
  fetch(`https://${host}/v3/players?team=${team}&season=${season}`, {
    headers: {
      'x-rapidapi-key': apiKey,
      'x-rapidapi-host': host
    }
  })
  .then((response) => response.json())
  .then((data) => data.response.forEach(inputPlayers))
  .catch((error) => console.error('Error:', error));
}

function requestEnglandSquad() {
  requestSquad(10, 2020);
}

function inputPlayers(data) {
  var players = document.querySelector(".squad-list__players");
  var playerHtml = renderPlayerInfo(data.player);
  players.append(document.createRange().createContextualFragment(playerHtml));
}

requestEnglandSquad();

body {
  margin: 0;
  padding: 0;
}

.squad-heading {
  text-align: center; 
  font-size: 1.33em;
  font-weight: bold;
  line-height: 1.33em;
}

.squad-list {
  background-color: #cfdae8;
}

.squad-list__players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  margin: 0;
}

.squad-list__item-link {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  text-decoration: none;
  margin: 0.25em;
  padding: 0.125em;
  border: thin solid #212e65;
}

.player-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  align-items: center;
  background-color: #fff;
  color: #212e65;
}

.player-details .r {
  margin: 0;
  opacity: 1;
  text-align: center;
  transition: opacity .8s ease-in-out;
}

.player-details .r p {
  margin: 0.125em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<div class="squad-list">
  <div class="squad-heading">Squad</div>
  <ul class="squad-list__players"></ul>
</div>

<script id="player-info" type="text/x-handlebars-template">
  <div class="squad-list__item-link">
    <div class="player-image-wrapper">
      <image src="{{photo}}" class="player-image" alt="Image of {{name}}" />
    </div>
    <div class="player-details">
      <div class="r">
        <p class="player-name"><strong>{{name}}</strong></p>
      </div>
      <div class="r">
        <p class="player-age">Age: {{age}}</p>
      </div>
    </div>
  </div>
</script>