Javascript/DOM记忆游戏问题：点击仅翻转单张卡片而非全部

嘿，这是新手开发时超常见的小问题，别担心！你的核心问题是没有指定要操作的是当前被点击的那张卡片，所以代码会把所有.card元素都翻转了。咱们来一步步搞定它：

方法一：传递当前点击元素到函数 #

先修改你的事件处理逻辑，把当前点击的卡片对象传给cardFlip函数：

$(".card").on("click", flipCard);
function flipCard(event) { 
  cardFlip($(this)); // $(this)就是当前被点击的那张卡片
}
function cardFlip($card) { 
  $card.toggleClass('open show'); // 只对传入的这张卡片操作
}

方法二：简化写法（更推荐） #

其实可以不用单独的cardFlip函数，直接在点击事件里处理，代码更简洁直观：

$(".card").on("click", function() {
  $(this).toggleClass('open show');
});

为啥原来的代码不行？ #

你之前在HERE位置如果写了$(".card").toggleClass(...)，jQuery会选中页面上所有带.card类的元素，自然就会翻转全部卡片。而$(this)在事件处理函数里，指向的就是当前被用户点击的那个DOM元素，这样就只会对单张卡片生效啦。

如果还有小问题，可以检查下卡片的HTML结构，确保open和show类对应的CSS样式是正确的，这样翻转效果才能正常显示~

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