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

Posted

技术标签:

【中文标题】试图从存储卡问题中删除一个类【英文标题】：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>

【问题讨论】：

给匹配的对一个新的类。他们需要保持翻转 【参考方案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>

【讨论】：

以上是关于试图从存储卡问题中删除一个类的主要内容，如果未能解决你的问题，请参考以下文章

Git从本地存储库中删除上游

如何从远程存储库中取消提交所有文件

从 SVN 转储中删除空修订的问题

如何从 GAE 数据存储中删除列（属性）？

将我从网站上删除的输出存储到一个数组中并打印其中的特定部分

如何从存储在 Parse 列中的数组中删除对象