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

【问题标题】：How do I compare two list items against each other in javascript?如何在javascript中比较两个列表项？
【发布时间】：2017-11-26 15:16:18
【问题描述】：

我正在做一个带有纸牌记忆游戏的项目，您尝试通过翻转两张纸牌来猜测它们是否匹配。

我有一个洗牌的功能，然后另一个限制只能一张接一张地翻转 2 张牌（除了已经猜到的牌），现在我正在尝试解决这个问题：

你翻转一张卡片（点击事件），然后你翻转另一张卡片，然后我想要 javascript 比较它们（它们上面有很棒的图标）并查看它们是否相同，如果它们是相同的，我将实现一些动画但如果不是，它们就会向下翻转，另一个动画就会消失。这是我的 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 技能还不够好。

【问题讨论】：

标签： javascript jquery compare match

【解决方案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 
 }
}

【讨论】：

我应该将 firstCard 和 secondCard 定义为什么？因为 javascript 无法识别它们
你需要为你的应用程序定义一个逻辑。 firstCard 和 secondCard 是您要比较的两张卡。例如，您可以在单击卡片时将卡片推送到数组中，并且当您在该数组中有两张卡片时，将它们相互比较，就像我在我的问题中显示的那样。
我试过了，但是当我尝试像 $(this).push($cards) 这样引用空变量 $cards = [] 它不起作用，我试过了控制台记录该数组，但推送后它仍然是空的
您正在做的是将卡片视为数组。你应该像这样将卡片推到数组中：array.push(card)。查看我编辑的答案。
这就是问题所在！天哪，我很困惑为什么它不起作用，但我做错了！最后，非常感谢！

【解决方案2】：

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

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

工作小提琴here

【讨论】：

【解决方案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
}

【讨论】：