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

Question

I'm working on a project with a memory game of cards that you try to guess by flipping two and see if they match.

I have a function that shuffles them, and then another that restricts that only 2 cards should be flipped one after the other (besides the already guessed ones) and now I'm trying to figure this out:

You flip one card (click event) and then you flip another, then I want javascript to compare them (they have fontawesome icons on them) and see if they are the same, if they are, I'll implement some animation but if not they flip back down and another animation goes off. Here's my 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>

I was thinking about adding another class of 1, 2, 3, etc. and matching the two similar ones like 1-1 2-2 then check if they match but my javascript skills are not good enough.

Answer 1

using jQuery, you can check if both cards have the same class, like this:

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

You need to use the children() selector of jQuery because the class that determines how your card looks like is a child of <li class="card"> .

EDIT:

To get the two cards you want to compare, you could do this:

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

and now when you have two cards in your array, perform the check, like 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

You can add a custom data attribute to each card to add for example id's for each. That way you don't rely on the applied classes. And then compare the id's.

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

Working fiddle here

Answer 3

Unless you are programmatically generating these cards at random, this seems like a trivial task.

That aside, you should identify the parameters of this test. Are there only ever 2 cards? Will the class names always occur in order of fa , followed by fa-icon-slug ?

The first question it seems like you've answered. The second question is important because it tells us that the class names for each card element are sorted , which is very important for how we write our JavaScript.

Let's assume, for the sake of argument, that your class names are sorted and that there will only ever be 2 class names on these card elements. That means we can just grab the second (or the last) class name for comparison.

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
}