如何在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
}