我无法比较Javascript中的两个数组项目

Question

我很难弄清楚如何准确地比较数组中的两个项。这是javascript：

const listCards = document.querySelectorAll('.fa');
cardArray = Array.from(listCards);
let shuffleCards  = shuffle(cardArray.slice(3,cardArray.length-1));
document.querySelectorAll('.fa').forEach(function(cv){cv.remove(), this});

/*
* Display the cards on the page
*   - shuffle the list of cards using the provided "shuffle" method below
*   - loop through each card and create its HTML
*   - add each card's HTML to the page
*/
const listAddCard = document.querySelectorAll('.card');
for(i=0; i<listAddCard.length; i++){
listAddCard.item(i).appendChild(shuffleCards[i]);
if(i>0){
if(shuffleCards[i].innerHTML === (shuffleCards[0].innerHTML)){
console.log('i is' + shuffleCards[i].innerHTML + 'and 0 is' + shuffleCards[0].innerHTML)
listAddCard.item(i).classList.add('match');

}
}
else listAddCard.item(i).classList.add('match'); 
}
// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}

以下是javascript正在寻找的HTML：

<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card open show">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>

每当我在代码if(shuffleCards[i].innerHTML === (shuffleCards[0].innerHTML))中运行此检查时，它总是运行true。我不知道如何准确地进行比较。

我基本上将一个节点列表转换为一个数组，然后尝试比较该列表中每个项的值。

Answer 1

与类属性进行比较

if (shuffleCards[i].classList.value === (shuffleCards[0].classList.value)) {

Answer 2

您正在比较innerHTML。所有这些都有空的innerHTML。当然，评估永远是真实的。

使用element.className或element.classList.contains("fa-diamond")或elements[i].classList.contains(elements[0].className)进行比较。

if(shuffleCards[i].className == shuffleCards[0].className){
console.log('i is' + shuffleCards[i].innerHTML + 'and 0 is' + shuffleCards[0].innerHTML)
listAddCard.item(i).classList.add('match');
}

或

if(shuffleCards[i].classList.contains(shuffleCards[0].className)){
console.log('i is' + shuffleCards[i].innerHTML + 'and 0 is' + shuffleCards[0].innerHTML)
listAddCard.item(i).classList.add('match');
}

或

if(shuffleCards[i].classList.contains('fa-diamond')){
console.log('i is' + shuffleCards[i].innerHTML + 'and 0 is' + shuffleCards[0].innerHTML)
listAddCard.item(i).classList.add('match');
}