比较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>