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

我正在研究一个使用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

来源

2017-08-05 woolsox

你的问题是什么？请将代码放在http://codepen.io，以便人们可以看到它的功能。 –

抱歉，只是添加了codepen。我试图弄清楚如何编写一个函数，让游戏识别两张牌是否与他们保持透露的相同，如果没有，他们会翻转回来。 – woolsox

整个方法容易出错，并且有大量不必要的重复代码。您应该使用数组来存储卡片，并使用负值表示卡片已翻转。这会将那些“其他”如果减少到总共两到三行，并允许您在任何时候添加更多图像，而无需添加更多的复制面食代码。 –

的几点思考：

1）这似乎是你的，如果其他逻辑可以简化为：

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

来源

2017-08-05 21:29:42

我对JS很陌生 - 你能解释一些吗？感谢您抽出时间回复。 – woolsox

@woolsox你能描述哪一部分？我的意思是代码按照之前设置为null的顺序执行 –

，完成的是什么？和这个。className - “this”在做什么？我不完全清楚他们的用法。谢谢乔纳斯。 – woolsox

不是答案，只是一个建议。

元素有classList属性，toggle方法。在你的情况下，你可以应用一个默认样式到一个元素，然后通过在'card_ten_img'和'ten'之间交换相同的方式打开或关闭一个类来改变它的外观。您还可以使用事件委托并仅向文档添加一个侦听器，该侦听器会查看点击是否来自卡片并相应地执行操作。例如。

// 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函数，看到其中点击的来源和实现逻辑基于源，其当前状态，游戏状态和规则上游戏。

来源

2017-08-06 00:00:59 RobG

请注意，点击卡的内部元素不会触发卡更换。 –

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

回答

相关问题