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

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">的子<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。

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

在这里工作

Answer 3

除非您以编程方式随机生成这些卡，否则这似乎是一项琐碎的任务。

除此之外，您应该确定此测试的参数。 只有2张卡吗？ 将类名总是发生在顺序fa ，随后fa-icon-slug ？

似乎您已经回答了第一个问题。 第二个问题很重要，因为它告诉我们每个card元素的类名都是已排序的 ，这对于我们编写JavaScript的方式非常重要。

为了便于讨论，我们假设对您的类名进行了排序，并且这些卡元素上只会有2个类名。 这意味着我们只需要获取第二个（或最后一个）类名即可进行比较。

var $cards = $('.card'); // select all card elements

// get class value from each elem
// then split string into array delimited by space characters
// lastly, get the second value in the array (it's zero-indexed).
var cardOneValue = $cards[0].attr('class').split(' ')[1];
var cardTwoValue = $cards[1].attr('class').split(' ')[1];

if (cardOneValue == cardTwoValue) {
    // match
}