如何编写一个检查两个类是否相同的函数

Question

我正在使用 JS 开发一个记忆游戏。我已经设法进行了一些切换工作，可以在两张卡面之间来回改变班级。我现在正在尝试关闭一个功能，它检查两张游戏卡是否匹配，如果它们是图像保持翻转，如果它们不是图像恢复到卡面。

// variable declarations for game elements
let gameTiles = document.getElementsByClassName('game_tile');
let cardFace = document.getElementsByClassName('card_face');
let cardMatchCheck = [];
let cardArray = 
[ "one", "one", "two", "two", "three", "three", 
 "four", "four", "five", "five", "six", "six", 
"seven", "seven", "eight", "eight", "nine", "nine", 
 "ten", "ten", "eleven", "eleven", "twelve", "twelve" ];

// div class assignment for loop from the cardArray
// .className += allows for adding to an already assigned class
// in this case "game_tile" (our button class)

for (let i = 0; i < gameTiles.length; i++) {
for (let j = 0; j < cardArray.length; j++) {
    gameTiles[i].setAttribute("class", cardArray[j]);
   } 
} 

// click response (working)
let gameTileClick = document.getElementsByTagName('button');
for (let i = 0; i < gameTileClick.length; i++) {
    gameTileClick[i].addEventListener('click', changeCardImage);
}

  // testing grounds:

// this function runs through all card classes, and switches 
// between both card image states (back, front, back)
// need to work on implementing the pair recognition

function changeCardImage(cardArray) {
if (cardArray.className == 'one') {
    cardArray.className = 'card_one_img'
    cardMatchCheck.push(cardArray.className);
    cardMatch();
    cardMismatch();
} else if (cardArray.className == 'card_one_img') {
    cardArray.className = "one"    
} else if (cardArray.className == 'two') {
    cardArray.className = 'card_two_img'
    cardMatchCheck.push(cardArray.className);
    cardMatch();
    cardMismatch();
} else if (cardArray.className == 'card_two_img') {
    cardArray.className = 'two'
} else if (cardArray.className == 'three') {
    cardArray.className = 'card_three_img'
} else if (cardArray.className == 'card_three_img') {
    cardArray.className = 'three'
} else if (cardArray.className == 'four') {
    cardArray.className = 'card_four_img'
} else if (cardArray.className == 'card_four_img') {
    cardArray.className = 'four'
} else if (cardArray.className == 'five') {
    cardArray.className = 'card_five_img'
} else if (cardArray.className == 'card_five_img') {
    cardArray.className = 'five'
} else if (cardArray.className == 'six') {
    cardArray.className = 'card_six_img'
} else if (cardArray.className == 'card_six_img') {
    cardArray.className = 'six'
} else if (cardArray.className == 'seven') {
    cardArray.className = 'card_seven_img'
} else if (cardArray.className == 'card_seven_img') {
    cardArray.className = 'seven'
}  else if (cardArray.className == 'eight') {
    cardArray.className = 'card_eight_img'
} else if (cardArray.className == 'card_eight_img') {
    cardArray.className = 'eight'
}  else if (cardArray.className == 'nine') {
    cardArray.className = 'card_nine_img'
} else if (cardArray.className == 'card_nine_img') {
    cardArray.className = 'nine'
}  else if (cardArray.className == 'ten') {
    cardArray.className = 'card_ten_img'
} else if (cardArray.className == 'card_ten_img') {
    cardArray.className = 'ten'
}  else if (cardArray.className == 'eleven') {
    cardArray.className = 'card_eleven_img'
} else if (cardArray.className == 'card_eleven_img') {
    cardArray.className = 'eleven'
}  else if (cardArray.className == 'twelve') {
    cardArray.className = 'card_twelve_img'
} else if (cardArray.className == 'card_twelve_img') {
    cardArray.className = 'twelve'
    } 
}

console.log(cardMatchCheck);


// function for checking card match/mismatch 

function cardMatch() {
if (cardArray.className == cardArray.className) {
    console.log('match');
    }         
}   

function cardMismatch() {
if (cardArray.className != cardArray.className) {
    cardArray.className = 'card_face';
    }
}

抱歉，如果任何格式有问题 - 这是我的第一篇 SO 帖子。任何方向都非常感谢。提前感谢您的宝贵时间！

编辑：这是我目前所拥有的：https://codepen.io/woolsox/pen/mMRPJK

Answer 1

一些想法：

1）您的 if else 逻辑似乎可以简化为：

 var tmp= cardArray.className.split("_");
 cardArray.className = tmp.length>1?tmp[1]:"card_"+tmp[0]+"_img";

2)只保留前一个元素的指针：

var before = null;
function cardClicked(){
   if(before){
    if(before.className === this.className){
      alert("match");
    }
     before = null;
  }else{
     before = this;
  }
 }

Answer 2

不是答案，只是建议。

元素有一个classList 属性和一个toggle 方法。在您的情况下，您可以将默认样式应用于元素，然后通过打开或关闭类来更改其外观，就像在“card_ten_img”和“十”之间交换一样。您还可以使用事件委托，并且只向文档添加一个侦听器，该侦听器会查看点击是否来自卡片并做出相应的行为。例如

// If event target has class .card, toggle inverted class
function invertCard(evt) {
  var el = evt.target;
  if (el.classList.contains('card')) {
    el.classList.toggle('inverted');
   }
}

// Add listener to document to handle clicks on cards
document.body.addEventListener('click', invertCard, false);

/* Default style for a card */
.card {
  display: inline-block;
  float: left;
  width: 20px;
  height: 20px;
  border: 1px solid red;
  margin: 5px;
  text-align: center;
  color: black;
  background-color: white;
}

/* Additional style for inverted card */
.inverted {
  color: white;
  background-color: black;
}

<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>

您可能希望使用更通用的 handleClick 函数，该函数查看点击的来源并根据来源、当前状态、游戏状态和游戏规则实现逻辑。 p>