Question

我正在开发一个带有记忆游戏卡片的项目，你试图通过翻转两个来猜测它们是否匹配。

我有一个让他们洗牌的功能，然后是另一个限制只有两张卡应该一个接一个地翻转的功能（除了已经猜到的那些）之后我现在试图解决这个问题：

你翻转一张卡片（点击事件），然后你翻转另一张卡片，然后我想要javascript来比较它们（它们上面有它们的fontawesome图标），看看它们是否相同，如果它们是，我将实施一些动画，但如果没有，他们倒退，另一个动画熄灭。这是我的HTML：

<ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  (16 total list items, 8 of the same time just shuffled around randomly)
</ul>

我正在考虑添加另一个1,2,3等等的类，并匹配两个类似的类，如1-1 2-2，然后检查它们是否匹配，但我的javascript技能不够好。

Answer 1

使用jQuery，您可以检查两张卡是否具有相同的类，如下所示：

if (firstCard.children().attr("class") == secondCard.children().attr("class")) {
// do the animation  
} else {
// do something else 
}

您需要使用jQuery的children（）选择器，因为确定卡片外观的类是<li class="card">的孩子。

修改

要获得您想要比较的两张牌，您可以这样做：

let openArray = []; $(".card").on("click", function() { openArray.push($(this)); });

现在当您的阵列中有两张牌时，请执行检查，如下所示：

if(openArray.length == 2) { // perform the check let firstCard = openArray[0]; let secondCard = openArray[1]; if (firstCard.children().attr("class") == secondCard.children().attr("class")) { // do the animation } else { // do something else } }

Answer 2

您可以为每张卡添加自定义数据属性，例如为每个卡添加ID。这样你就不依赖于应用的类了。然后比较id's。

<li class="card" data-id="2">

工作小提琴http://localhost:8080/api/v1.0/person

如何在javascript中比较两个列表项？

2 个答案: