单击特定元素时显示数组中的当前信息

Question

我有一个对象数组。 当您单击卡片时，会显示一个包含信息的弹出窗口。 如何显示与我单击的卡片对应的当前信息。 我显示所有动物的信息，但如何显示特定卡片的信息

const pets = [
    {
      "name": "Jennifer",
      "img": "../../assets/images/pets-jennifer.png",
      "type": "/",
    },
    {
      "name": "Sophia",
      "img": "../../assets/images/pets-sophia.png",
      "type": "/",
    },
    {
      "name": "Woody",
      "img": "../../assets/images/pets-woody.png",
      "type": "..",
    }
]
document.querySelectorAll('.pet_card').forEach(card => card.addEventListener('click', () => {
    modal.classList.add('show-modal')
})) 
document.querySelector('.modal').innerHTML = `
    ${pets.map(petTemplate).join('')}
`;
function petTemplate(pet) {
    return `
        <div class="modal_wrap">
            <div class="modal_img">
                <img src="${pet.img}">
            </div>
            <div class="modal_content">
                <h3>${pet.name}</h3>
            </div>
        </div>
    `;
}
<div class="main_pets_wrap">
  <div class="pet_card">
    <h5>Woody</h5>
    <button class="pet_card_btn">Learn more</button>
  </div>
  <div class="pet_card">
    <h5>Jennifer</h5>
    <button class="pet_card_btn">Learn more</button>
  </div>
  .....
</div>

Answer 1

这是我的解决方案：

<!-- Add this div -->
<div class="modal"></div>

// Create an array out of node list by using the spread operator
[...document.querySelectorAll('.pet_card')].forEach(card =>
    card.addEventListener('click', (event) => {
       let pet = findSelectedPet(event.target);
       let modal = petTemplate(pet);
       document.querySelector(".modal").innerHTML = modal;
}));

// This is how you should find the pet information.
function findSelectedPet(btn) {
  let name = btn.querySelector("h5").innerText;
  return pets.find(pet => pet.name == name);
}

// I didn't touch this function.
function petTemplate(pet) {
    return `
        <div class="modal_wrap">
            <div class="modal_img">
                <img src="${pet.img}">
            </div>
            <div class="modal_content">
                <h3>${pet.name}</h3>
            </div>
        </div>
    `;
}