javascript - 单击获取数组元素

Question

我正在做一个小项目，通过 API 显示世界上每个国家/地区的信息

我在这里遇到的困难是，每当我点击一张卡片时，我想显示一个包含有关该国家/地区的更多信息的模式

这部分工作得很好，但是无论我点击哪张卡片，它总是会是我要获取的数组信息的最后一个元素

例如，如果我点击“阿富汗”:

我得到数组的最后一个元素(数组是每张牌)，这是津巴布韦

这是我的代码

基本上“国家/地区”参数是 API 数据

我正在做的是循环遍历每张卡片并在单击时添加事件监听器并尝试在模式中获取有关该卡片的所有信息...但它不起作用，我只获取最后一个卡片信息

function showModal(country) {
  const cards = document.querySelectorAll(".card");

  for (card of cards) {
    card.addEventListener("click", (e) => {
      openModal.classList.toggle("active");

      openModal.innerHTML = `
      <div id="modal">
      <div id="close-modal">
        <i class="gg-close"></i></i>
      </div>
        <div id="modal-img">
          <img src="${country.flag}">
        </div>
        <div id="modal-content">
          <div class="country-details">
            <h2>${country.name}</h2>
            <h4>Nom natif : <span>${country.nativeName}</span></h4>
            <h4>Population : <span>${country.population.toLocaleString()}</span></h4>
            <h4>Région : <span>${country.region}</span></h4>
            <h4>Sous-région : <span>${country.subregion}</span></h4>
            <h4>Capitale : <span>${country.capital}</span></h4>
          </div>

          <div class="country-details">
            <h4>Domaine de premier niveau : <span>${
              country.topLevelDomain
            }</span></h4>
            <h4>Monnaie : <span>${country.currencies}</span></h4>
            <h4>Langues : <span>${country.languages}</span></h4>
            <h4>Fuseau horaire : <span>${country.timezones}</span></h4>
            <h4>Indicatif téléphonique : <span>${
              country.callingCodes
            }</span></h4>
            <h4>ISO 3166-1 alpha-3 : <span>${country.alpha3Code}</span></h4>
          </div>

          <div class="country-details">
            <h4>Pays frontaliers</h4>
            <span>${country.borders}</span>
          </div>
        </div>
      </div>
      `;

      /* Close Modal */
      const closeModalBtn = document.getElementsByClassName("gg-close");
      closeModalBtn[0].addEventListener("click", (e) =>
        e.target.parentElement.parentElement.parentElement.classList.remove(
          "active"
        )
      );
    });
  }
}

我对数组还不太了解

谢谢!

Answer 1

问题是，每次调用 showModal 时，您都会向所有卡片添加一个事件监听器。相反，您应该将事件监听器添加到与收到的国家/地区相对应的卡中。这就是为什么您应该为每张卡添加某种 ID，这样您就可以知道哪个国家属于哪个卡。

假设每张卡的 ID 等于其国家/地区名称:

function showModal(country) {
  const card = document.querySelectorAll(`#${country.name}`);

  card.addEventListener("click", (e) => {
    openModal.classList.toggle("active");

    openModal.innerHTML = `
    <div id="modal">
    <div id="close-modal">
      <i class="gg-close"></i></i>
    </div>
      <div id="modal-img">
        <img src="${country.flag}">
      </div>
      <div id="modal-content">
        <div class="country-details">
          <h2>${country.name}</h2>
          <h4>Nom natif : <span>${country.nativeName}</span></h4>
          <h4>Population : <span>${country.population.toLocaleString()}</span></h4>
          <h4>Région : <span>${country.region}</span></h4>
          <h4>Sous-région : <span>${country.subregion}</span></h4>
          <h4>Capitale : <span>${country.capital}</span></h4>
        </div>

        <div class="country-details">
          <h4>Domaine de premier niveau : <span>${
            country.topLevelDomain
          }</span></h4>
          <h4>Monnaie : <span>${country.currencies}</span></h4>
          <h4>Langues : <span>${country.languages}</span></h4>
          <h4>Fuseau horaire : <span>${country.timezones}</span></h4>
          <h4>Indicatif téléphonique : <span>${
            country.callingCodes
          }</span></h4>
          <h4>ISO 3166-1 alpha-3 : <span>${country.alpha3Code}</span></h4>
        </div>

        <div class="country-details">
          <h4>Pays frontaliers</h4>
          <span>${country.borders}</span>
        </div>
      </div>
    </div>
    `;

    /* Close Modal */
    const closeModalBtn = document.getElementsByClassName("gg-close");
    closeModalBtn[0].addEventListener("click", (e) =>
      e.target.parentElement.parentElement.parentElement.classList.remove(
        "active"
      )
    );
  }); 
}