记忆游戏翻转单张卡片不起作用 - JavaScript

Question

我创建了一个记忆游戏。大多数功能都有效，但我正在努力解决的一件事是让卡片正确翻转。这是我用来在卡片背面 (card.jpg) 和卡片正面（在 ImagesArr 数组中找到的图像名称）之间交换的函数：

// Swap out cards for shuffled images
function swapImages() {
  for(var i = 0; i < images.length; i++) {
    if(images[i].src !== "/img/card.jpg") {
      images[i].src = imagesArr[i];
    } else {
      images[i].src = "/img/card.jpg";
    }
  }
}

它可以显示隐藏的图像，但它会显示所有图像，而不仅仅是单击的图像。我上面还有这个函数，它有助于翻转动画和添加一些必要的类以及调用 swapImages 函数。

// Flip the cards over on click and start the timer
function flipCards() {
  cards.forEach(card => {
    card.addEventListener("click", () => {
      card.classList.toggle("flipped");
      card.classList.toggle("chosen");
      chosenCards.push(card);
      startTimer();
      swapImages();
      checkMatch();
    });
  });
}

我觉得我需要一个forEach 循环或类似的东西，但我不确定如何实现它或在哪里实现它。我也可能完全错了，根本不需要forEach 循环。 TIA 寻求帮助！

Answer 1

我认为您需要使用目标事件（https://www.w3schools.com/jsref/event_target.asp）。这样该程序就知道另一面是哪张卡片。通过您提供的代码，我怀疑单击时所有卡片都会翻转。