爲什麼我的for循環從最後一項開始並在一次迭代後停止運行？

我的問題是參考createBoard（）函數，這裏是第二個函數。爲什麼我的for循環從最後一項開始並在一次迭代後停止運行？

執行時，循環以[cards]數組中的最後一項開始。它將「王」分配給第一個< .card類元素>，然後循環停止。這裏有什麼見解？

main.js

function createCards(){ 

var gameBoard = document.getElementById('game-board'); 

for(var i = 1; i <= 4; i++){ 

    //Create newCard as a Div 

    var newCard = document.createElement('div'); 

    //Add Class of .card to the NewCard 
    newCard.className = 'card'; 

    // Append card to the board 
    gameBoard.appendChild(newCard); 
    } 
} 


createCards(); 




var cardsInPlay = []; 

function createBoard() { 

    var cards = ["queen", "queen", "king", "king"]; 

    for(var j = 0; j < cards.length; j++){ 

    document.querySelector(".card").setAttribute("data-card", cards[j]); 

    // document.querySelector(".card").addEventListener("click", isTwoCards) 
    } 
} 


createBoard();

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Memory Game</title> 

<link rel="stylesheet" type="text/css" href="style.css"> 

</head> 
<body> 

<nav class="clearfix"> 

<a href="#">Instructions</a> 
<a href="#">Game</a> 

</nav> 

<h1>Memory Game</h1> 
<h2>This is a game of "Remember This"</h2> 

<h2>Instructions</h2> 


<p>Concentration,....more text</p> 


    <div class="board" id="game-board"> 

    </div> 






<footer> 


</footer> 
<script src="main.js"></script> 
</body> 
</html>

來源

2016-12-17 ZeroCalm

的問題是在參照createBoard（）函數。我忘了說早些時候。首先是有可見性。 – ZeroCalm

要覆蓋在這裏你可以按照從環分離這個簡單的步驟，

。

function createBoard() { 

    var cards = ["queen", "queen", "king", "king"]; 
    var cardArr = document.getElementsByClassName("card"); 
    for(var j = 0; j < cards.length; j++){ 

    cardArr[j].setAttribute("data-card", cards[j]); 
    } 
}

由於

來源

2016-12-17 21:23:45

你for循環不會在最後一個元素開始，它只是覆蓋你已經存在的價值。

通過使用setAttribute功能一遍又一遍 - 你重寫您設置的值（最後一個值是你，你有

我不知道什麼是你想要的結果在這裏，但你可以。設置的值是舊與新的一個組合：

for(var j = 0; j < cards.length; j++){ 
    document.querySelector(".card").setAttribute("data-card", document.querySelector(".card").getAttribute("data-card") + cards[j]); 
}

例如

來源

2016-12-17 21:16:04 Dekel

我正在嘗試通過四張卡片循環，併爲每一張卡片分配一個字符串。第一張牌是皇后，第二皇后，第三皇牌......等等。 – ZeroCalm

但是'document.querySelector（「。card」）'只會將其中的第一個 – Dekel

爲什麼我的for循環從最後一項開始並在一次迭代後停止運行？

回答

相關問題