比較JS中的數據屬性

Question

我有存儲卡游戲，我要創建一個按鈕，以找到第一個選定的配對卡。

我有這樣的HTML：

<div class="card" data-card="1" >
<div class="card" data-card="7" >
<div class="card" data-card="5" >
<div class="card" data-card="1" >
<div class="card" data-card="7" >
<div class="card" data-card="5" >

兩次（對於兩張相同的卡）。 這是按鈕的JavaScript函數的樣子：

function findPair(){
let divsCards = document.querySelectorAll('.card');

for (i = 0; i < divsCards.length; i++){

Array.from(divsCards).forEach(function(card){
    if(card.dataset.card === card.dataset.card){
        divsCards[i].classList.add('flipped');
    }
});
   }
    }

我知道我的陳述不好，我要比較的是“數據卡”值，因此，例如，如果我單擊值5的卡，我希望其他5張值卡被“翻轉” “當我單擊“查找對”按鈕時，但是我嘗試了所有我知道的事情。 我真的是JS的初學者。

Answer 1

在不了解您期望的結果的情況下，很難回答這個問題，但是我將假設玩家已經翻轉了一張牌，並且您想在紙牌陣列中找到該匹配的牌。 這是我會做的...

首先，為每個卡片元素添加一個唯一標識符，以使您不會在同一卡片實例中匹配一對：

<div class="card" data-card="1" data-uid="100">
<div class="card" data-card="7" data-uid="101">
<div class="card" data-card="5" data-uid="102">

請注意，我只是選擇將uid值從100開始，因此除了卡值之外，還容易區分它們。

然后，當用戶翻轉卡片時，您將卡片值和uid傳遞給findPair（）方法，以便您可以像這樣找到匹配項：

function findPair(card, uid) {
    let divsCards = document.querySelectorAll('.card');
    cardsLen = divsCards.length;

    for (i = 0; i < cardsLen; i++) {
        var currentCard = divsCards[i];

        if (currentCard.dataset.card === card && currentCard.dataset.uid !== uid) {
            // We have found a match
            return currentCard;
        }
    }
} 

Answer 2

對於問題的特定查詢，無需重寫整個代碼，您可以創建一個變量，其中值是for循環中的當前元素，使用.filter()鏈接到包含所有元素的數組，以從中排除當前索引。結果，然后比較data-*屬性值

  function findPair() {
    let divsCards = Array.from(document.querySelectorAll('.card'));
    for (let i = 0; i < divsCards.length; i++) {
      let currentCard = divsCards[i]; // current element at index `i`
      divsCards.filter((_, index) => index !== i) // exclude current element          
      .forEach(function(card) {
        // compare remainder of elements to excluded element
        if (card.dataset.card === currentCard.dataset.card) {
          currentCard.classList.add('flipped');
        }
      });
    }
  }

jsfiddle https://jsfiddle.net/hnud8tfx/

Answer 3

你可以做這樣的事情。 想法是向所有卡添加事件偵聽器，然后單擊以記住該卡（最多兩個）。 一旦選擇了兩個（以前沒有選擇過），就檢查它們是否匹配。

如果是這樣，請將它們添加到完成列表（用於檢查游戲何時完成（未實現）），並清空翻轉列表並更新類名稱。

 const flipped = []; const done = []; const cards = Array.from( document.querySelectorAll(".container > .card") ); const scoreEle = document.getElementById("score"); cards.forEach(card=>{ card.addEventListener("click", function(){ if(flipped.length < 2 && !this.classList.contains("flip")){ flipped.push(card); this.classList.add("flip"); card.innerText = card.dataset.card; setTimeout(check, 500); } }) }) function check(){ if(flipped.length != 2) return; const [c1, c2] = flipped; if(c1.dataset.card === c2.dataset.card){ done.push(c1,c2); } else { flipped.forEach(c=>{ c.classList.remove("flip") c.innerText = ""; }); } flipped.length = 0; } 

 .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .card { margin-top: 10px; width: 100px; height: 100px; background-color: green; } .card.flip { background-color: blue; } 

 <div class="container"> <div class="card" data-card="1" ></div> <div class="card" data-card="7" ></div> <div class="card" data-card="5" ></div> <div class="card" data-card="1" ></div> <div class="card" data-card="7" ></div> <div class="card" data-card="5" ></div> </div>