如何访问动态分配的图像?

Question

有史以来的第一个问题;我只是一个初学者，所以请原谅我的无知！
场景：JavaScript存储卡游戏。我创建了一个 imageArray，洗牌后创建了这个循环以将图像添加到卡片中。

for(i = 0; i < imageArray.length; i++) {
cardImage = imageArray[i];
$('.flip-card-front').eq(i).attr('src', cardImage);
}

但是，我一生都无法弄清楚如何访问我想在我的卡匹配功能中使用的"src"属性值。[放置在云上的图像]

$('.flip-card').click(function() {
if(lockBoard) return;
$(this).addClass('flipped');

if(!cardFlipped) {
cardFlipped = true;
firstCard = this;
} else {
cardFlipped = false;
secondCard = this;
// If two cards have been flipped lock the board
lockBoard = true;
// Do the cards match?
// Does firstCard src attr === secondCard src attr?
};

我已经尝试(this).attr('src')并(firstCard).attr('src')并收到错误"无法读取未定义的属性"。 我也尝试通过.innerHTML:contains访问它。无。我完全迷失了。请帮忙。

Answer 1

您的问题是(this)和(firstCard)没有像您期望的那样在此处定义。

尝试更改您的：

.click(function()

自：

.click(function(event)

并通过以下方式获取您的卡：

let firstCard = $(event.target);

Answer 2

经过多次搜索，我找到了解决方案：

let firstCardImg = $(this).find(">:first-child").attr("src");