Question

我的问题是参考createBoard（）函数，这是第二个函数。

执行循环时，[cards]数组中的最后一项开始。它将“king”分配给第一个＆lt; .card类元素＆gt;然后循环停止。有什么见解吗？

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>

Answer 1

您的for循环不会从最后一个元素开始，只是覆盖您已经拥有的值。

一遍又一遍地使用setAttribute功能 - 你覆盖了这个值（你设置的最后一个值是你拥有的值。

我不确定这里你想要的结果是什么，但你可以将值设置为旧的值与新值相结合：

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

例如。

Answer 2

你在这里压倒一切。您可以通过从循环中分离来执行此简单步骤。

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

由于

为什么我的for循环从最后一项开始并在一次迭代后停止运行？

2 个答案: