javascript - 使用 JQuery 使一张卡片在打开另一张卡片后关闭

Question

我正在制作一个内存游戏，方法是用卡片填充 div:

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++) {
  $(".deck").append('<div  class="card"> <img class="card" src="./' + masks[i] + '"/></div>');

}
//Displaying the mask images with a for loop
$(".card").click(function() {

// Show card on click
$(this).find("img").show();

})

});

并且卡片会显示出来，但我想让当您单击一张卡片时它保持打开状态，直到您单击并打开另一张卡片为止，以便两者都保持打开状态，使用 JQuery 执行此操作的最佳和正确方法是什么？

Answer 1

你可以这样做:

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"];

//add style style="display: none;" so that when added, images are hidden
for (var i = 0; i < masks.length; i++) {
  $(".deck").append('<div  class="card"> <img class="card" style="display: none;" src="./' + masks[i] + '"/></div>');
}

//Displaying the mask images with a for loop
$(".deck").on('click', '.card', function() {
  var cardVisible = $('.card img:visible').length;       //Get the number of visible img
  if (cardVisible >= 2) $('.card img').hide();           //If 2 or more, hide all

  $(this).find("img").show();                            //Show the image
});

.card {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
  float : left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='deck'></div>