试图从存储卡问题中删除一个类答案

【问题标题】：Trying to remove a class from memory card issue试图从存储卡问题中删除一个类
【发布时间】：2019-08-16 17:01:47
【问题描述】：

我正在尝试创建一个记忆游戏。当卡片不相等时，我希望它们翻转回来。但是，当我尝试实现这一点时，只有第一张卡被翻转回来，而不是第二张。

我尝试从容器 div 访问卡片。

如果不匹配，我希望记忆游戏中选择的两张牌都会翻转。但是只有一个在不匹配时会翻转。

let box_inner = document.querySelectorAll('.box-inner');
let box_back = document.querySelectorAll('.box_back');
let box_front = document.querySelectorAll('.box-front');

const images = [{
    url: "https://via.placeholder.com/150/00EFF/FFF",
    name: 'FinnScreaming'
  },
  {
    url: "https://via.placeholder.com/150/00EFF/FFF",
    name: 'FinnScreaming'
  },
  {
    url: "https://via.placeholder.com/150/BF39ED/FFF",
    name: 'JakeFace'
  },
  {
    url: "https://via.placeholder.com/150/BF39ED/FFF",
    name: 'JakeFace'
  },
  {
    url: "https://via.placeholder.com/150/A3B90F/FFF",
    name: 'LemonGrab'
  },
  {
    url: "https://via.placeholder.com/150/A3B90F/FFF",
    name: 'LemonGrab'
  },
  {
    url: "https://via.placeholder.com/150/DFE9FA/FFF",
    name: 'Marceline'
  },
  {
    url: "https://via.placeholder.com/150/DFE9FA/FFF",
    name: 'Marceline'
  },
  {
    url: "https://via.placeholder.com/150/F28FCD/FFF",
    name: 'BMO'
  },
  {
    url: "https://via.placeholder.com/150/F28FCD/FFF",
    name: 'BMO'
  },
  {
    url: "https://via.placeholder.com/150/FF000/FFF",
    name: 'Rainicorn'
  },
  {
    url: "https://via.placeholder.com/150/FF000/FFF",
    name: 'Rainicorn'
  }


]


let choices = [];
const container = document.querySelector('.container');

function ShuffleSquares() {
  shuffle(images);

  for (var i = 0; i < images.length; i++) {
    box_back[i].style.backgroundImage = `url(${images[i].url})`;
    box_front[i].dataset.name = images[i].name;
    box_front[i].dataset.id = i;
    box_back[i].dataset.name = images[i].name;




  }

}
ShuffleSquares();



function FindAPair(e) {
  if (e.target.className !== 'container') {
    e.target.parentElement.classList.add('is-flipped');
    if (choices.length < 2) {
      choices.push(e.target);
    }
  }
  if (choices.length == 2) {
    if (choices[0].dataset.name === choices[1].dataset.name) {
      console.log('winner');
      choices = [];
    } else {
      console.log('Loser');
      choices = [];
      Match();
    }
  }
}

function Match() {
  for (var i = 0; i < box_inner.length; i++) {
    if (box_inner[i].classList.contains('is-flipped')) {
      box_inner[i].classList.remove('is-flipped');
    }
  }
}

function shuffle(array) {
  var currentIndex = array.length;
	var temporaryValue, randomIndex;

	// While there remain elements to shuffle...
	while (0 !== currentIndex) {
		// Pick a remaining element...
		randomIndex = Math.floor(Math.random() * currentIndex);
		currentIndex -= 1;

		// And swap it with the current element.
		temporaryValue = array[currentIndex];
		array[currentIndex] = array[randomIndex];
		array[randomIndex] = temporaryValue;
	}

	return array;

  
}

container.addEventListener('click', FindAPair);

body {
  padding: 70px;
}

.container {
  width: 50%;
  height: 400px;
  display: grid;
  margin: 0 auto;
  margin-top: 60px;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  /* background-image:linear-gradient(#def5ff,  #f2fbff); */
  background-image: url('https://wallpapercave.com/wp/FMNuOQx.jpg');
  background-size: cover;
  box-shadow: 5px 5px 5px gainsboro;
  padding: 30px;
}

.box {
  perspective: 1000px;
  position: relative;
}

.box-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.box-inner.is-flipped {
  transform: rotateY(180deg);
}

.box-c {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.box-front {
  background-color: #2dabe3;
}

.box_back {
  transform: rotateY(180deg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="container">
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
</div>

【问题讨论】：

给匹配的对一个新的类。他们需要保持翻转

标签： javascript dom

【解决方案1】：

问题中的代码循环遍历所有卡片（包括匹配的卡片）：

for (var i = 0; i < box_inner.length; i++) {
  if (box_inner[i].classList.contains('is-flipped')) {
    box_inner[i].classList.remove('is-flipped');
  }
}

要翻转不匹配的卡片，您只需遍历存储它们的数组，即choices：

choices.forEach((elt) => elt.parentElement.classList.remove('is-flipped'));

您也不会让浏览器有机会向用户显示不匹配的卡片，因为您在没有超时的情况下将它们翻转回来。我为你添加了它，但我没有注意在超时期间从用户那里丢弃clicks，你可能想自己添加它：

let choices = [];
function FindAPair(e) {
  if (e.target.className !== 'container') {
    e.target.parentElement.classList.add('is-flipped');
    if (choices.length < 2) {
      choices.push(e.target);
    }
  }
  if (choices.length == 2) {
    setTimeout(checkChoices, 500);
  }
}

function checkChoices() {
  if (choices[0].dataset.name === choices[1].dataset.name) {
    console.log('winner');
    choices = [];
  } else {
    console.log('Loser');
    choices.forEach((elt) => elt.parentElement.classList.remove('is-flipped'));
    choices = [];
  }
}

(function init() {
  let box_inner = document.querySelectorAll('.box-inner');
  let box_back = document.querySelectorAll('.box_back');
  let box_front = document.querySelectorAll('.box-front');

  const images = [{
      url: "https://via.placeholder.com/150/00EFF/FFF",
      name: 'FinnScreaming'
  },
  {
      url: "https://via.placeholder.com/150/00EFF/FFF",
      name: 'FinnScreaming'
  },
  {
      url: "https://via.placeholder.com/150/BF39ED/FFF",
      name: 'JakeFace'
  },
  {
      url: "https://via.placeholder.com/150/BF39ED/FFF",
      name: 'JakeFace'
  },
  {
      url: "https://via.placeholder.com/150/A3B90F/FFF",
      name: 'LemonGrab'
  },
  {
      url: "https://via.placeholder.com/150/A3B90F/FFF",
      name: 'LemonGrab'
  },
  {
      url: "https://via.placeholder.com/150/DFE9FA/FFF",
      name: 'Marceline'
  },
  {
      url: "https://via.placeholder.com/150/DFE9FA/FFF",
      name: 'Marceline'
  },
  {
      url: "https://via.placeholder.com/150/F28FCD/FFF",
      name: 'BMO'
  },
  {
      url: "https://via.placeholder.com/150/F28FCD/FFF",
      name: 'BMO'
  },
  {
      url: "https://via.placeholder.com/150/FF000/FFF",
      name: 'Rainicorn'
  },
  {
      url: "https://via.placeholder.com/150/FF000/FFF",
      name: 'Rainicorn'
  }
  ];

  function ShuffleSquares() {
  shuffle(images);

  for (var i = 0; i < images.length; i++) {
      box_back[i].style.backgroundImage = `url(${images[i].url})`;
      box_front[i].dataset.name = images[i].name;
      box_front[i].dataset.id = i;
      box_back[i].dataset.name = images[i].name;




  }

  }
  ShuffleSquares();

  function shuffle(array) {
  var currentIndex = array.length;
      var temporaryValue, randomIndex;

      // While there remain elements to shuffle...
      while (0 !== currentIndex) {
          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;

          // And swap it with the current element.
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
      }

      return array;

  
  }
  const container = document.querySelector('.container');
  container.addEventListener('click', FindAPair);
})();

body {
  padding: 70px;
}

.container {
  width: 50%;
  height: 400px;
  display: grid;
  margin: 0 auto;
  margin-top: 60px;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  /* background-image:linear-gradient(#def5ff,  #f2fbff); */
  background-image: url('https://wallpapercave.com/wp/FMNuOQx.jpg');
  background-size: cover;
  box-shadow: 5px 5px 5px gainsboro;
  padding: 30px;
}

.box {
  perspective: 1000px;
  position: relative;
}

.box-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.box-inner.is-flipped {
  transform: rotateY(180deg);
}

.box-c {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.box-front {
  background-color: #2dabe3;
}

.box_back {
  transform: rotateY(180deg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="container">
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
</div>

【讨论】：