Question

我很快就在这里注册了Full Stack Developer程序，我们有一个课前作业。我在课程结束时只需要弄清楚我在任务中遇到的问题。

以下是问题：

卡片没有“翻转”以显示卡片的正面卡片正面的图像没有显示 cardsInPlay数组中没有任何卡片，但是，当你点击一张卡片时，JS的反应就像阵列中已经存在卡片一样。下面是我在JS中用于赋值的代码。任何帮助和解释将不胜感激！感谢。

var cards = [
{
    rank: "queen",
    suit: "hearts",
    cardImage: "images/queen-of-hearts.png"
},
{
    rank: "queen",
    suit: "diamonds",
    cardImage: "images/queen-of-diamonds.png"
},
{
    rank: "king",
    suit: "hearts",
    cardImage: "images/king-of-hearts.png"
},
{
    rank: "king",
    suit: "diamonds",
    cardImage: "images/king-of-diamonds.png"
}
];

var cardsInPlay = [];

var flipCard = function() {
    var cardId = this.getAttribute('data-id');
    console.log("User flipped " + (cards[cardId].rank));
    cardsInPlay.push(cards[cardId].rank);
    checkForMatch();
    console.log(cards[cardId].cardImage);
    console.log(cards[cardId].suit);
};

var checkForMatch = function() {
    this['src'] = (cards[0,1,2,3].cardImage);
    if (cardsInPlay.length === 2 && cardsInPlay[0] === cardsInPlay[1]) {
        alert("You found a match!");
    } else {
        alert("Sorry, try again");
    }
};

var createBoard = function() {
    for (var i = 0; i < cards.length; i++) {
        var cardElement = document.createElement('img');
        cardElement.setAttribute('src', "images/back.png");
        cardElement.setAttribute('data-id', i);
        cardElement.addEventListener('click', flipCard);
        document.getElementById('game-board').appendChild(cardElement);
    }
};

createBoard();

Answer 1

你的问题~~中的代码在运行时会产生错误（查看控制台）~~在this['src'] = (cards[0,1,2,3].cardImage);行

有一个主要问题>

此函数中this刚从flipCard调用，是指window对象，而不是img被点击的对象。（我以为你只是在测试东西）

要显示图片，您需要使用flipCard方法将其分配给img。（，因为您正在学习，您应该将data-id转换为数字）

var flipCard = function() {
    var cardId = parseInt(this.getAttribute('data-id'),10); // use parseInt to convert to integer
    console.log("User flipped " + (cards[cardId].rank));
    this.src = cards[cardId].cardImage; // add this to set the image
    cardsInPlay.push(cards[cardId].rank);
    checkForMatch();
    console.log(cards[cardId].cardImage);
    console.log(cards[cardId].suit);
};

除此之外，您的测试中存在概念错误。只要您单击图像，就可以在cardsInPlay数组中添加该卡，但不测试图像是否已翻转。因此，在图像上单击两次会将其添加两次，因为它具有相同的rank（这是您保存和测试的），它将返回匹配。

类分配的问题

1 个答案: