Question

所以，我用html，css和javascript制作了一个记忆游戏。

我做了一个按钮，用于切换卡片，表示所有拥有卡片的卡片

（'flipped'）类将删除或添加到该类。它看起来像这样：

function toggle (){
var divs = document.querySelectorAll('.card');

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

if (divs[i].classList.contains('flipped')){

divs[i].classList.remove('flipped'); 

}else{

divs[i].classList.add('flipped'); } 
} 
 }

我想制作已经翻转的卡片，而不受“切换”按钮的影响。

有什么想法吗？

Answer 1

我认为您正在寻找:not() selector。

var nonFlippedCards = document.querySelectorAll('.card:not(.flipped)');

for (var i = 0; 0 < nonFlippedCards.length; i++){ 
  divs[i].classList.add('flipped'); } 
}

现在保存它。

Answer 2

很难理解您希望按钮执行什么操作，但是如果您想要将翻转的卡面朝下翻转，则不需要else语句。当您单击卡片时，您需要将翻转的类添加到卡片上，或者使用您打算使用的其他某种方式，然后使用此按钮再次将它们全部朝下。请进一步说明按钮的用途。

Answer 3

如果该元素已经包含该类，则classList.add（）方法将不会添加“翻转”类，所以我猜您想跟踪过去翻转过的卡片吗？（我看不到您的视频）。为此，您可以使用作用域外的异步数组来跟踪卡是否翻转。只需创建一个空数组，然后在每次切换卡片时都使用for循环将数组中的值设置为1，然后在添加“翻转”类之前检查数组中是否存在该值，就像这样... < / p>

var dArr = [];

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

旁注：您的代码中有一个简单的错误，您放入0 < divs.length时请确保包含i < divs.length以防止无休止的for循环。：）

如果您想使代码更快一点，也可以在每次页面加载一次时抓取'.card'div，因此不必每次触发toggle（）函数时都执行此操作。除非您计划随着游戏的进行添加更多卡牌，否则这应该可行。我还将这些值包装在一个对象中，以避免使用全局变量，这将防止将来发生冲突。最后，我不会调用您的函数toggle（），因为它通常在JavaScript和JavaScript库中使用。无论如何，如果您有兴趣，这是我的版本，init函数会捕获所有的'.card'div，将它们粘贴到dVars对象的元素数组中，并且dArr变量也存储在同一对象中，以防止使用全局变量

var dVars = {
  dArr: [],
  divs: undefined
}


function flip (){
  for (i = 0; i < dVars.divs.length; i++){
    console.log(i);
    if (dVars.divs[i].classList.contains('flipped')){
        dVars.divs[i].classList.remove('flipped');
        dVars.dArr[i] = 1;
    } else if (!dVars.dArr[i]){
      dVars.divs[i].classList.add('flipped');
      console.log(i);
    }
  }
}

function init() {
  dVars.divs = document.querySelectorAll('.card');
}

window.onload = init;

您还可以通过以下方式在不使用异步数组的情况下进行操作：向每个<div>中添加一个类“ hasFlipped”以及“ flipped”类，然后检查<div>之前是否具有该类再次添加“翻转”类：

var dVars = {
  divs: undefined
}


function flip (){
  for (i = 0; i < dVars.divs.length; i++){
    if (dVars.divs[i].classList.contains('flipped')){
        dVars.divs[i].classList.remove('flipped');
    } else if (!dVars.divs[i].classList.contains('hasFlipped')){
      dVars.divs[i].classList.add('flipped', 'hasFlipped');
    }
  }
}

function init() {
  dVars.divs = document.querySelectorAll('.card');
}

window.onload = init;

希望这会有所帮助！

如何在JavaScript中删除类并保存我删除的类

3 个答案: