Javascript 如何正确设置属性以确保函数调用数组中的特定元素？

由于某些原因，当我使用“点击”时，它无法从我在开始创建的阵列中识别正确的卡。 在控制台中，它只显示“undefined”，而不是等级、西装和到src的路径

我试着想想，也许我不应该用这个

const cards = [{
    rank: "queen",
    suit: "hearts",
    cardImage: "images/quees-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",
  }
];
const cardsInPlay = [];

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

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

}

function createBoard() {
  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();

const卡=[{
等级：“女王”，
西装：“红心”，
cardImage:“心的图像/皇后.png”，
},
{
等级：“女王”，
西装：“钻石”，
cardImage:“images/queen=of diamonds.png”，
},
{
等级：“国王”，
西装：“红心”，
cardImage:“图像/红心之王.png”，
},
{
等级：“国王”，
西装：“钻石”，
cardImage:“图像/钻石之王.png”，
}
];
const cardsInPlay=[]；
函数checkForMatch（）{
this.setAttribute（'src'，cards.cardImage）；
如果（cardsInPlay.length==2）{
if（cardsInPlay[0]==cardsInPlay[1]）{
警告（“您找到了匹配项！”）；
}否则{
警惕（“对不起，再试一次。”）；
}
}
}
函数flipCard（）{
//这个.getAttribute（'data-id'）；
console.log（“用户翻转”+cards.rank）；
控制台.日志（卡片.卡片）；
控制台.日志（卡片.套装）；
扑克牌玩。推（牌。等级）；
checkForMatch（）；
}
函数createBoard（）{
对于（变量i=0；i

试试：

this.src=“cards.cardImage”

试试：

this.src=“cards.cardImage”

您的addEventListener正在调用flipcard，因此您可以在flipcard中使用

此

，然后将其传递到

checkForMatch

。因此，您可以使用

selectedCard

来代替此功能。正如其他人提到的，卡片是一个数组，所以你必须像访问卡片[cardNumber].rank一样访问它

---

您的addEventListener正在调用flipcard，因此您可以在flipcard中使用

此

，然后将其传递到

checkForMatch

。因此，您可以使用

selectedCard

来代替此功能。正如其他人提到的，卡片是一个数组，所以你必须像访问卡片[cardNumber]那样访问它。ranketc

cards。cardImage

不起作用-

cards

是一个数组，你需要先访问数组中的一个特定元素，就像

cards[1]。cardImage

。好的，听起来很合乎逻辑。我怎样才能调用我点击的卡？有什么建议吗？

cards.cardImage

不起作用-

cards

是一个数组，你需要先访问数组中的一个特定元素，就像

cards[1]。cardImage

。好的，听起来很合乎逻辑。我怎样才能调用我点击的卡？你对此有什么建议吗？非常感谢你的回答。由于我是这方面的新手，有一件事我不明白——我如何从翻盖卡上附加[cardNumber]——我尝试使用I，但它不被识别，所以我现在就被卡在那里。既然我不知道卡号，我该怎么看呢？@Mathsteacher7您好，卡号是在flipCard中定义的，然后您可以调用

checkForMatch（this）

。然后

checkForMatch（selectedCard）

将

此

作为

selectedCard

拉入，然后您根据

selectedCard

再次定义

cardname

。您可以将

selectedcard

视为该功能的新

this

。希望有帮助。非常感谢你的回答。由于我是这方面的新手，有一件事我不明白——我如何从翻盖卡上附加[cardNumber]——我尝试使用I，但它不被识别，所以我现在就被卡在那里。既然我不知道卡号，我该怎么看呢？@Mathsteacher7您好，卡号是在flipCard中定义的，然后您可以调用

checkForMatch（this）

。然后

checkForMatch（selectedCard）

将

此

作为

selectedCard

拉入，然后您根据

selectedCard

再次定义

cardname

。您可以将

selectedcard

视为该功能的新

this

。希望有帮助。

    function checkForMatch(selectedCard) {
        cardNumber = selectedCard.getAttribute('data-id');
        selectedCard.setAttribute('src', cards[cardNumber].cardImage);
        if (cardsInPlay.length === 2) {
            if (cardsInPlay[0] === cardsInPlay[1]) {
                alert("You found a match!");
            } else {
                alert("Sorry, try again.");
            }
        }
    }

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