我正在创建数组clickedBoxesArray并在每次点击时将类名传递给它。然后我比较那些类名。当我刚刚点击的元素的类名与我之前点击的项的类名匹配时，我想要为这些元素添加类。
当clickedBoxesArray[clickedBoxesCounter]处的对象的值与clickedBoxesArray[prevClickedBoxCounter]相同时，if语句不会触发。但是，如果这两个位置的值为Undefined，则if语句将两个值评估为相等，并根据需要更改类。如果值是未定义的，那么为什么语句会起作用，但如果值是相同的类列表则不会，
JS / JQuery的：
$(document).ready(function(){
"use strict";
//this function populates the game body with a user selected # of cards
$(".submit").on("click", function(){
var boxAmt = 2 * Math.round(parseInt($(".boxNum").val())/2);
for (var b = 1; b <= boxAmt; b++){
$(".game-body").append("<span class='card'><i class='fa fa-heart fa-4x'></i></span>");
// $(".game-body").append("<span class='card'><i class='fa " + iconChoices[Math.floor(Math.random()*(200-0+1))+0] + " fa-4x'></i></span>");
};
if(boxAmt%5 === 0){
$(".game-body").css({marginLeft : "20%", marginRight : "20%"});
}//closes %5 if/else
else if(boxAmt%4 === 0){
$(".game-body").css({marginLeft : "28%", marginRight : "20%"});
}
});
//this function flips cards
$(".game-body").on("click", ".card", function(){
$(this).addClass("fliparoo");
$(this.children).addClass("game-icon");
});
//this function counts clicks and matches cards
var count = 0;
var clickedBoxesArray = []
$(".game-body").click(function(){
count+=1;
function logClicksCurrent(input){
clickedBoxesArray.push(input);
}
logClicksCurrent($(".game-body").find(".fliparoo").children()[count -1]);
var clickedBoxesCounter = clickedBoxesArray.length-1;
var prevClickedBoxCounter = clickedBoxesArray.length-2
console.log(clickedBoxesArray[clickedBoxesCounter]);
console.log(clickedBoxesArray[prevClickedBoxCounter]);
console.log(clickedBoxesArray)
if(count%2 === 0 && clickedBoxesArray[clickedBoxesCounter] === clickedBoxesArray[prevClickedBoxCounter]){
$(".game-body").find(".fliparoo").addClass("match-card");
$(".game-body").find(".fliparoo").addClass("match-icon");
}
});
HTML：
<!DOCTYPE html>
<html>
<head>
<title>MEMORY | easy mode</title>
<link href="./assets/css/reset.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">
<link href="./assets/css/animations.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<audio src="./assets/audio/got-theme.mp3"></audio>
<div id="entrance-animation" class="fadeIn">
<header>
<div class="header">
<div class="memory-name">
<span>Mem</span><i class="fa fa-lightbulb-o"></i> <span>ry</p>
</div>
</div>
<!-- class="heart-row">
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-heart-o"></i>
</ul> -->
<span class="timer"></span>
</header>
<div class="enter-boxes">HOW MANY BOXES DO YOU WANT?</div>
<input type="text" value="" class="boxNum">
<input class="submit" type="submit" value="gimme boxes">
<section class="game-body group">
</section>
</main>
<footer>
<nav>
<a href="new-game.html"><div class="return-to-menu">Back to menu</div></a>
</nav>
</footer>
</div>
<script src="./assets/js/scripts.js"></script>
</body>
</html>
CSS：
/*********************************************************
element and cross-page styling
**********************************************************/
*{
box-sizing: border-box;
}
body {
background: blue;
font-family: 'Orbitron', sans-serif;
color: white
}
a {
text-decoration: none;
color: white;
}
.memory-name {
text-align: justify;
font-family: 'Orbitron', sans-serif;
color: white;
font-size: 4em;
}
/*********************************************************
new-game page styling
**********************************************************/
.choice-menu {
display: inline-block;
margin: 10% 0 0 40%;
}
.new-game-text {
display: inline-block;
margin: 0 0 0 40px;
padding: 40px 0 0 0;
text-align: center;
font-size: 2em;
}
.easy-mode-box {
text-align: center;
font-size: 2em;
border: 2px solid white;
margin: 50px 0 0 20px;
padding: 10px 0;
background: blue;
transform: perspective(200px) rotateY(-15deg)
}
.hard-mode-box {
text-align: center;
font-size: 2em;
border: 2px solid white;
margin: 20px 0 0 20px;
padding: 10px 0;
background: blue;
transform: perspective(200px) rotateY(15deg)
/*add transform here*/
}
.easy-mode-box:hover {
-webkit-transition-property: background;
background: paleturquoise;
}
.hard-mode-box:hover {
-webkit-transition-property: background;
background: turquoise;
}
/*********************************************************
easy mode page styling (index.html)
**********************************************************/
/****header****/
.easy-mode-header {
display: block;
margin: 0 0 0 40%;
}
.heart-row {
display: inline-block;
margin: 0 0 0 16%;
}
.timer {
float: right;
margin: 0 16% 0 0;
}
/****game body****/
.game-body {
margin: 5% 15%;
position: relative;
/*margin: auto;*/
}
.game-body span {
position: relative;
float: left;
overflow: hidden;
}
.card {
width: 10em;
height: 10em;
background: steelblue;
display: block;
transition: background 1s, -webkit-transform 1s;
border-radius: .4em;
border: 1px solid darkblue;
margin: 3px;
color: rgba(255,255,255,0);
text-align: center;
padding-top: 5%;
}
.card:hover {
box-shadow: 2px 2px 2px 2px darkblue;
}
/****click transitions****/
.fliparoo {
background: powderblue;
-webkit-transform: rotateY(180deg);
}
.game-icon {
color:rgba(255,255,255,1);
transition-delay: .5s;
}
.match-card{
background: limegreen;
}
.match-icon{
color:rgba(200,200,200,1);
}
/*********************************************************
footer
**********************************************************/
.return-to-menu {
display: inline-block;
text-align: center;
font-size: 2em;
/*border: 2px solid white;*/
margin: 50px 0 20px 42%;
padding: 10px 10px 5px 10px;
background: blue;
border-radius: .3em;
}
.enter-boxes {
display: block;
font-size: 1em;
/*border: 2px solid white;*/
background: blue;
border-radius: .3em;
}
.return-to-menu:hover {
-webkit-transition-property: background;
background: cornflowerblue;
box-shadow: 2px 2px 2px 2px steelblue;
}
/*********************************************************
clearfix (experimental-prolly not relevant)
**********************************************************/
.group:after {
content: "";
display: table;
clear: both;
}
/*********************************************************
media queries
**********************************************************/
@media (max-width: 1420px) {
.game-body{
width: 2000px;
}
}
@media (min-width: 1620px) {
.margin-fix {
margin: 2% 0 0 15%;
}
}
@media (min-width: 1620px) {
.margin-fix-2 {
margin: 2% 0 0 23%;
}
}