记忆卡牌游戏提示按钮显示异常问题求助

开发记忆卡牌游戏时设置了“提示”按钮，预期功能是让所有未匹配的卡牌翻面显示正面1秒。目前功能逻辑可运行，但存在异常：所有卡牌并非显示各自对应的正面图案（如地球、火星），而是全部显示同一张图案；每次刷新页面后显示的图案会变化，但所有卡牌显示同一图案的问题始终存在。另外该功能还会让已匹配的卡牌也翻面，这个问题打算后续处理。

相关代码 #

卡牌HTML结构 #

<div class="container">
  <div class="container-top">
    <div class="card unmatched"></div>
    <div class="card unmatched"></div>
    <div class="card unmatched"></div>
    <div class="card unmatched"></div>
  </div>
  <div class="container-bottom">
    <div class="card unmatched"></div>
    <div class="card unmatched"></div>
    <div class="card unmatched"></div>
    <div class="card unmatched"></div>
  </div>
</div>

卡牌随机化JS/jQuery代码 #

let cards = [
  "Elements/images/EarthCard.jpg",
  "Elements/images/EarthCard.jpg",
  "Elements/images/JupiterCard.jpg",
  "Elements/images/JupiterCard.jpg",
  "Elements/images/MarsCard.jpg",
  "Elements/images/MarsCard.jpg",
  "Elements/images/MercuryCard.jpg",
  "Elements/images/MercuryCard.jpg",
];
shuffle();

//Function to shuffle array order
function shuffle() {
  let random = 0;
  let temp = 0;
  for (i = 1; i < cards.length; i++) {
    random = Math.round(Math.random() * i);
    temp = cards[i];
    cards[i] = cards[random];
    cards[random] = temp;
  }
  assignCards();
} //End of shuffle func

//function to assign shuffled array to cards
function assignCards() {
  $(".card").each(function(index) {
    $(this).attr("data-card-value", cards[index]);
  });
  clickHandlers();
} //End of assignCards func

//Function to add 'selected' tag to clicked on cards
function clickHandlers() {
  $(".card").on("click", function() {
    $(this)
      .html("<img src='" + $(this).data("cardValue") + "'/>")
      .addClass("selected");
    checkMatch();
  });
} // End of clickHandlers function

原提示功能函数 #

//Function to turn cards when hint button clicked
function showHint() {
  {
    //show card hint side
    $(".card")
      .html("<img src='" + $(".card").data("cardValue") + "'/'/>")
      .show();
  }
  setTimeout(function() {
    //show card back side
    $(".card").html("<img src= 'Elements/images/CardBack.jpg' />").show();
  }, 1000);
  score = score - hintclick;
  $(".scorecounter").html("Score: " + score);
}

问题原因及修复方案 #

问题原因 #

原提示函数中，$(".card").data("cardValue")只会获取第一个匹配的.card元素的data属性值，然后把这个值应用到所有卡牌上，导致所有卡牌显示同一张图案。同时原代码的img标签存在闭合错误（'/'/>应为/>）。

修复后的提示函数 #

//Function to turn cards when hint button clicked
function showHint() {
  // 遍历每个未匹配卡牌，显示对应正面
  $(".card.unmatched").each(function() {
    $(this).html(`<img src='${$(this).data("cardValue")}' />`).show();
  });
  
  setTimeout(function() {
    // 将未匹配卡牌翻回背面
    $(".card.unmatched").html("<img src='Elements/images/CardBack.jpg' />").show();
  }, 1000);
  
  score = score - hintclick;
  $(".scorecounter").html("Score: " + score);
}

修复说明 #

1. 使用$(".card.unmatched").each()遍历每个未匹配的卡牌，确保每个卡牌读取自己的data-card-value属性，显示对应的正面图案
2. 同时将选择器从.card改为.card.unmatched，直接解决了已匹配卡牌被翻面的问题（若不需要可改回.card）
3. 修正了img标签的闭合错误，避免潜在的渲染问题

内容的提问来源于stack exchange，提问作者Amy