Question

我有一个记忆游戏，我试图添加一个按钮来显示所有卡并再次翻转。所有被翻转的牌都与类别被翻转。当其中一张卡已经被翻转或隐藏时，就会发生问题，然后该功能将其翻转，而不是其他卡。

我该如何解决？

function revelCards() { 
  var revelCard = document.querySelectorAll('.card'); 
  for (var i = 0; (i < revelCard.length) ; ++i) {
    if (revelCard[i].classList.contains('flipped')){
      revelCard[i].classList.remove('flipped');
    } else {
      revelCard[i].classList.add('flipped');
  }
}

Answer 1

您应该只删除if句子，就像这样：

function revelCards() { 
  var revelCard = document.querySelectorAll('.card'); 
  for (var i = 0; (i < revelCard.length) ; ++i) {
      revelCard[i].classList.add('flipped');
  }
}

现在已翻转的卡片将保持翻转状态，而所有其他卡片将翻转。

Answer 2

问题是您的循环仅基于当前CSS翻转。但是，其中之一是手动翻转的，因此循环只需切换CSS。

要解决此问题，您可以将翻转的值存储在变量中。在进入for循环之前，您可以手动切换（重置）变量。

或者，您可以忽略已经设置的值。这意味着CSS不会再次切换。

在任何一种情况下，您都需要引用手动修改的原件。

Answer 3

如果我正确理解，则有一组“卡片”，要显示其内容然后隐藏。如果我是对的，您可以尝试执行以下操作：

window.onload = ()=>{
  let btn = document.getElementById('toggle');
  btn.addEventListener('click', ()=>{
    let cards = document.querySelectorAll('.card');
    let flippedCards = [];
    for(let i = 0; i < cards.length; i++){
      // remember all the cards that are already flipped
      if(cards[i].classList.contains('flipped')){
        flippedCards.push(i);
      }
      // flip all the cards
      cards[i].classList.add('flipped');
    }
    // flip all the cards again after 1 second (1000ms)
    setTimeout(()=>{
        for(let i = 0; i < cards.length; i++){
          cards[i].classList.remove('flipped');
        }
        // return the cards to their original state
        flippedCards.forEach(elem =>{
          cards[elem].classList.add('flipped');
        });
    }, 1000);
  });
};

.container {
  display: flex;
  margin-bottom: 5px;
}

.card {
  transition: background-color 0.3s ease-in-out;
  background-color: red;
  width: 50px;
  height: 50px;
  margin-left: 5px;
}

.flipped {
  background-color: green;
}

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card flipped"></div>
  <div class="card"></div>
  <div class="card flipped"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
<input type="button" value="flip cards" id="toggle">

另外，这是working example：）

如何更改所有div的班级？

3 个答案: