如何在JavaScript中比较两个列表项目

Question

我正在研究一个带有卡片的内存游戏的项目，您尝试通过翻转两个来猜测它们是否匹配。

我的功能可以使它们改组，然后另一个限制了只有2张卡的函数，只能将一张牌翻转为另一个卡片（除了已经猜到了），现在我试图弄清楚这一点：

您翻转一张卡（单击事件），然后您翻转另一张卡，然后我希望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的儿童（）选择器，因为确定您的卡的样子是<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？

似乎您已经回答的第一个问题。第二个问题很重要，因为它告诉我们每个卡元素的类名是排序，这对于我们编写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
}