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="container">
  <div class="box">
    <div class="icon">
      <i class="fa fa-search" aria-hidden="true"></i>
    </div>
    <div class="content">

      <h3>Search</h3>
      <p>sadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfen</p>

    </div>
  </div>
</div>

请注意，我只是选择将uid值开头为100，因此除了卡值之外，它们很容易区分。

然后，当用户翻转卡片时，您将卡片值和uid传递给findPair（）方法，以便您可以像这样找到匹配项：

<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">

Answer 2

对于问题的特定查询，无需重写整个代码，您可以创建一个变量，其中值是conda activate循环中的当前元素，使用for链接到包含所有内容的数组元素以从结果中排除当前索引，然后比较.filter()属性值

data-*

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>

比较JS中的数据属性

3 个答案: