Question

我正在尝试让卡片在匹配的游戏中从后向前翻转，我遇到了麻烦我收到了控制台错误，我不确定为什么会这样：在checkForMatch（main.js：27）在HTMLImageElement.flipCard（main.js：37）

请查看我的代码，让我知道你看到了什么。附：这是我正在做的学前班课程，所以我不是100％熟悉一些术语，但通常可以理解人们想说的话。感谢

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 checkForMatch = function() {
    this.setAttribute('src', (cards.cardImage));
if (cardsInPlay.length === 2 && cardsInPlay[0] === cardsInPlay[1]){
    alert("You found a match!");
} else {
        alert("Sorry, try again");
    }
}

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

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参数传递给该函数。试试这个：

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

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

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', function() {
            flipCard(this);
        });
        document.getElementById('game-board').appendChild(cardElement);
    }
}

createBoard();

Answer 2

要解决上下文问题，您可以使用checkForMatch()替换更新checkForMatch.bind(this)();，但您的代码中似乎还有另一个问题checkForMath，行►this.setAttribute('src', (cards.cardImage));没有问题t指定要从中获取图像的数组的索引。

我猜你想通过cardId，类似于此checkForMatch.bind(this)(cardId);

您的控制台日志似乎也未指定索引，并且应该使用cardId以及►console.log(cards[cardId].cardImage);和console.log(cards[cardId].suit);

我在一个工作示例中进行了以下所有更改。就像图像一样随机出于演示目的和播种实际图像，使用纠正控制台输出以查看一切正常。

document.addEventListener("DOMContentLoaded", function(event) {


  var cards = [{
    rank: "queen",
    suit: "hearts",
    cardImage: "http://lorempixel.com/25/25/animals/"
  }, {
    rank: "queen",
    suit: "diamonds",
    cardImage: "http://lorempixel.com/25/25/animals/"
  }, {
    rank: "king",
    suit: "hearts",
    cardImage: "http://lorempixel.com/25/25/animals/"
  }, {
    rank: "king",
    suit: "diamonds",
    cardImage: "http://lorempixel.com/25/25/animals/"
  }];

  var cardsInPlay = [];

  var checkForMatch = function(cardId) {
    this.setAttribute('src', cards[cardId].cardImage);
    if (cardsInPlay.length === 2 && cardsInPlay[0] === cardsInPlay[1]) {
      alert("You found a match!");
    } else {
      alert("Sorry, try again");
    }
  }

  var flipCard = function() {
    var cardId = this.getAttribute('data-id');
    checkForMatch.bind(this)(cardId);
    console.log("User flipped " + cards[cardId].rank);
    cardsInPlay.push(cards.rank);
    console.log(cards[cardId].cardImage);
    console.log(cards[cardId].suit);
  }

  var createBoard = function() {
    for (var i = 0; i < cards.length; i++) {
      var cardElement = document.createElement('img');
      cardElement.setAttribute('src', "http://lorempixel.com/25/25/animals/");
      cardElement.setAttribute('data-id', i);
      cardElement.addEventListener('click', flipCard);
      document.getElementById('game-board').appendChild(cardElement);
    }
  }

  createBoard();
});

img{
padding: 2px;
}

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

this.setAttribute不是一个函数

2 个答案: