如何用jQuery实现记忆游戏中打开新卡片时关闭已打开卡片

嘿，这个需求很好实现，咱们直接在你的点击事件里加几行代码就行，思路特别简单：每次点击新卡片时，先把所有已经显示的其他卡片隐藏掉，再处理当前点击的卡片。

先给你修正并完善后的完整代码：

var masks = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "6.jpg", "7.jpg", "8.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "6.jpg", "7.jpg", "8.jpg"]; 
for (var i = 0; i < masks.length; i++) { 
    // 给图片默认加上display:none，初始状态隐藏（记忆游戏初始都是遮罩状态嘛）
    $(".deck").append('<div class="card"> <img class="card" src="./' + masks[i] + '" style="display:none;"/></div>'); 
} 

$(".card").click(function() { 
    // 核心逻辑：找到所有可见的卡片图片，排除当前点击的这张，然后隐藏它们
    $(".card img:visible").not($(this).find("img")).hide();
    // 显示/切换当前卡片的状态（用toggle的话，点击已打开的卡片还能关闭它，体验更友好）
    $(this).find("img").toggle();
})

代码细节解释： #

• 初始隐藏处理：原代码没给图片设置初始隐藏状态，我补上了style="display:none;"，这样页面加载后卡片都是遮罩状态，符合记忆游戏的常规逻辑。
• 自动关闭已打开卡片：$(".card img:visible")会筛选出所有已经显示的卡片图片，.not($(this).find("img"))排除当前点击的这张，最后.hide()就把其他已打开的卡片都关掉了。
• 可选的toggle优化：把原代码的show()改成toggle()，这样用户点击已经打开的卡片时可以关闭它，交互更灵活；如果不需要这个功能，改回show()即可。

另外注意原代码最后多了一个多余的});，我已经在完整代码里去掉了哦～

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