어떻게 자바 스크립트에서 서로에 대해 두 목록 항목을 비교합니까?

Question

두 개를 뒤집어 추측 해보고 일치하는 카드가 있는지 확인하려고하는 카드 게임이있는 프로젝트에서 작업하고 있습니다.

나는 그들을 셔플 기능을 가지고 있고, 만 2 카드 (이미 짐작 것 외에) 하나씩 뒤집어되어야하고, 지금은이 문제를 알아 내기 위해 노력하고 있음을 제한하는 또 다른 :

당신은 하나의 카드를 뒤집은 다음 (클릭 이벤트) 다른 플립하면 자바 스크립트가 그들 (그들에게 fontawesome 아이콘을 가지고있다)을 비교하고 그들이 동일하면 볼 수 있다면, 나는 애니메이션을 구현하지만, 그렇지 않다면 그들은 뒤로 물러나고 다른 애니메이션은 사라집니다.

<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-1 2-2과 같이 두 개의 유사한 것들을 등 1의 다른 클래스, 2, 3을 추가 및 일치에 대해 생각했다

하지만 내 자바 스크립트 기술 : 여기 내 HTML의 충분하지 않습니다. jQuery를 사용하여

Answer 1

, 두 카드는 다음과 같이, 같은 클래스가 있다면 당신은 확인할 수 있습니다

당신이 결정하는 클래스가 어떻게 카드가 보이기 때문에처럼 아이들()의 jQuery 셀렉터를 사용할 필요가

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

자녀는 <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를 추가 할 수 있습니다. 그렇게하면 적용된 클래스에 의존하지 않게됩니다. 그리고 이드를 비교하십시오.

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

는 프로그래밍 방식으로 무작위로이 카드를 생성하지 않는 바이올린 here

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 
}