Javascript存儲卡游戲最后一張卡未翻轉

Question

嗨，我有一個有演示的記憶游戲。

https://kuochye.github.io/memorygame/

我遇到了最后一張卡沒有翻轉的問題，無法弄清原因。

document.querySelectorAll(".flip-container").forEach(card => card.classList.add("clicked"));
setTimeout(function () {
document.querySelectorAll(".flip-container").forEach(card => 
card.classList.remove("clicked"));
}, 30000);

^這是我做的30秒鍾，以顯示卡片下來之前所做的事情。 但是不知何故，最后一張卡片沒有顯示。

  // Build single card
 var buildCardNode = function (index, value, isRevealed, width, height) {
var flipContainer = document.createElement("li");
var flipper = document.createElement("div");
var front = document.createElement("a");
var back = document.createElement("a");

flipContainer.index = index;
flipContainer.style.width = width;
flipContainer.style.height = height;
flipContainer.classList.add("flip-container");
if (isRevealed) {
  flipContainer.classList.add("clicked");
}

flipper.classList.add("flipper");
front.classList.add("front");
front.setAttribute("href", "#");
back.classList.add("back");
back.classList.add("card-" + value);
back.setAttribute("href", "#");

flipper.appendChild(front);
flipper.appendChild(back);
flipContainer.appendChild(flipper);

flipContainer.addEventListener('click', handleFlipCard);

  document.querySelectorAll(".flip-container").forEach(card => card.classList.add("clicked"));
setTimeout(function () {
document.querySelectorAll(".flip-container").forEach(card => 
card.classList.remove("clicked"));
}, 30000);

return flipContainer;

 };

Answer 1

您正在做的是尋找已添加的每張卡並將其翻轉。 可以，但是您要在將每張卡片添加到文檔之前進行此操作。 因此，對於添加的每張卡，它都會找到之前添加的每張卡，並將其翻轉。

您想改為執行以下兩項操作之一：

一種。 將所有卡添加到文檔后翻轉（通過將第一段代碼從buildCardNode函數中移出到調用它的位置）。

灣 在將每張卡添加到文檔之前，直接對其進行翻轉（而不是使用document.querySelectorAll.forEach，而是使用flipContainer.classList.add / remove）。