如何委托事件将我的函数应用到使用普通 Java 脚本动态创建的卡片？

Question

我正在尝试应用一项功能，在单击时隐藏或显示动态创建的卡片的背面（反之亦然）。第一个函数有效，但它只适用于模板，所以我发现解决它的方法是将事件委托给 HTML 中已经存在的元素，我尝试这样做，但它不起作用。

这是我一直在研究的功能

let isFlipped = false;

const mainContainer = document.getElementById("root");
mainContainer.addEventListener('click', function(){
  if(event.target.matches('.button-container')) {
    const card=event.target.closest('.card-container');
    turnCard(card);
    if (event.target.matches('.back')) {
      const card=event.target.closest('.card-container');
      returnCard(card); 
    }
  }
})
function turnCard(card) {
  const frontCard=document.querySelector("#front-card");
  const backCard=document.querySelector("#back-card");

  if (isFlipped) {
    backCard.classList.toggle('hide');
    frontCard.classList.toggle('hide');
  }
  isFlipped = !isFlipped;
} 
function returnCard (card){
  const frontCard=document.querySelector("#front-card");
  const backCard=document.querySelector("#back-card");

  if(!isFlipped){
    backCard.classList.toggle('hide');
    frontCard.classList.toggle('hide');
    isFlipped = !isFlipped;
  }
}

这是卡片结构

 data.forEach(element => {
    const cardItem = document.createElement('li');

    cardItem.innerHTML += `<li class="card-container" itemscope itemtype="https://schema.org">
    <article id="front-card">
      <h2>${element.name}</h2>
      <div class="top-card">
        <img alt="Plant Name" src="${element.imageUrl}">
        <dl itemscope itemtype="https://schema.org" class="facts">
          <div class="amounts">
            <dt itemprop="water-amount" class="amount">Water</dt>
              <dd>
                <img alt="Gota" src="resources/Icons/agua-activa.png" >
                <img alt="Gota" src="resources/Icons/agua-activa.png" >
                <img alt="Gota" src="resources/Icons/agua-inactiva.png" class="inactiva">
              </dd>
          </div>
          <div class="amounts">
            <dt itemprop="light-amount" class="amount">Light</dt>
              <dd>
                <img alt="Sol" src="resources/Icons/luz-activa.png" >
                <img alt="Sol" src="resources/Icons/luz-inactiva.png" class="inactiva" >
                <img alt="Sol" src="resources/Icons/luz-inactiva.png" class="inactiva" >
              </dd>
          </div>
          <div class="amounts">
            <dt itemprop="care-amount" class="amount">Care</dt>
              <dd>
                <img alt="Semaforo" src="resources/Icons/cuidado-activa.png" >
                <img alt="Semaforo" src="resources/Icons/cuidado-inactiva.png" class="inactiva" >
                <img alt="Semaforo" src="resources/Icons/cuidado-inactiva.png" class="inactiva" >
              </dd>
          </div>
        </dl>
      </div>
      <p>${element.shortDescription}</p>
      <div class="button-container">
        <button>Detalles</button>
      </div>
    </article>
    <article id="back-card" class="hide">
      <h2>${element.name}</h2>
      <div class="top-card">
        <img alt="Plant Name" src="${element.imageUrl}">
        <dl itemscope itemtype="https://schema.org">
          <dt class="scientific">${element.scientificName}</dt>
          <dt class="detail">Botanical Family</dt><dd>${element.botanicalFamily}</dd>
          <dt class="detail">Usage</dt><dd>${element.applications}</dd>
          
        </dl>
      </div>
      <div class="bottom-card">
        <dl id="description">
        <dt>Climate data</dt><dd>${element.climaticData}</dd>
          <dt>Description</dt><dd>${element.description}</dd>
          <dt>Maintenance</dt><dd>${element.maintenance}</dd>
        </dl>
        <div id="icons">
          <div class="stats">
            <img class="stats1" alt="Estadisticas 1" src="resources/Icons/estadisticas-1.png">
            <img class="stats2" alt="Estadisticas 1" src="resources/Icons/estadisticas-2.png">
          </div>
          <div class="back">
            <img alt="Regresar" src="resources/Icons/Regresar.png">
          </div>
        </div>
      </div>
    </article>
  </li>`

    cardList.appendChild(cardItem);

  });
  
  return cardList;
};

Answer 1

首先，在 HTML 中，id 应该是唯一的。所以而不是

<article id="front-card">

和

<article id="back-card" class="hide">

改为

<article class="front-card">

和

<article class="back-card hide">

接下来，这些行中的选择器将匹配多个元素，而不仅仅是您想要的元素。

const frontCard=document.querySelector("#front-card");
const backCard=document.querySelector("#back-card");

您已将卡片元素传递给函数，因此您可以使用它来选择您想要的元素（请注意，我已切换到类选择器，假设您将在上面进行 HTML 更改）：

const frontCard=card.querySelector(".front-card");
const backCard=card.querySelector(".back-card");