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

与class属性比较

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

我无法比较Javscript

2 个答案: