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

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;
  }
 }