使用JQuery執行onclick函數時，如何獲得正確的圖像src？

Question

我創建了一個游戲，單擊“開始”按鈕時，它會動態刪除該div元素並創建一個新元素，以顯示我希望用戶看到的圖像。 我的目標是，當用戶單擊圖像時 ，它將控制台記錄其單擊的圖像的src，以驗證單擊的圖像。 我的代碼有效。 我的問題是，當我單擊任何圖像時，無法分辨圖像來源之間的差異。

將onclick函數放在if語句內會好嗎？ 我在想...如果單擊此源，則控制台日志為該源。

//startButton onclick function//

$("#startButton").on("click", function (event) {

//when button is clicked, it removes intro-container div and everything inside//

    $(this).closest(".intro-container").remove();

//image sources//

    kevImage = 'src=assets/images/kevin-durant.png';
    lebImage = 'src=assets/images/kobe-bryant.png';
    kobImage = 'src=assets/images/lebron-james.png';
    micImage = 'src=assets/images/michael-jordan.png';

//dynamically creating new elements//

    $("#characterPage").append("<div class= intro-container>" +
        "<h1> CHOOSE YOUR BALLER" + "</h1>" +
        "<div class=image-container>" +
        "<img class = image " + kevImage + ">" + "<img class = image " + lebImage + ">" +
        "<img class = image " + kobImage + ">" + "<img class = image " + micImage + ">" +
        "</div>" +
        "</div>");

//onclick on image class

    $(".image").on("click", function (event) {

//if statement that executes only if kevImage is selected

        if (kevImage) {
            console.log('correct');
        } else {
            console.log('wrong');
        }

    });


});

我的代碼的圖片

Answer 1

嘗試$(".image").attr('src')並將結果記錄在控制台中。

Answer 2

替換為：

$(".image").on("click", function (event) {

                if ($(".image").attr('src')) {
                    console.log($(this).attr('src'));
                } else {
                    console.log('wrong');
                }

            });