如何訪問動態分配的圖像？

Question

有史以來的第一個問題； 我只是一個初學者，所以請原諒我的無知！
場景：JavaScript 記憶卡游戲。 我創建了一個 imageArray 並在洗牌后創建了這個循環以將圖像添加到卡片中。

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

但是，我一生都無法弄清楚如何訪問我想在我的卡片匹配功能中使用的 'src' 屬性值。 [圖片放在 cloudinary]

 $('.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");