javascript - 我无法比较 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)) {