使用動態創建的元素中的參數調用javascript函數

Question

我正在嘗試使用PHP將圖片動態加載到MySQL等站點的配置文件頁面，然后使用javascript將其添加到無序列表中。 我希望每個列表項也有一個like按鈕，單擊該按鈕將調用javascript函數，並將圖像名稱作為其參數傳遞。 我已經搜索並找到了有關如何在不傳遞任何變量的情況下調用函數的答案，但是每次將圖像名稱添加到函數調用時，控制台日志都將顯示“ undefined”。

圖片顯示得很好，並且imgArray [i]是一個包含文件名的字符串（例如photo.jpg），但是

console.log(imgArray[i]) 

在onclick函數中讀取未定義。 我也嘗試過

like.setAttribute()

沒有任何結果。

function showGallery(imgArray) {
    for(var i=0; i < imgArray.length; i++){ 

        var list = document.getElementById("image-list"),
            li   = document.createElement("li"),
            img  = document.createElement("img"),
            like = document.createElement("a");

        img.src = "user_images/" + imgArray[i];
        like.className = "button-like";

        li.appendChild(img);
        li.appendChild(like);
        list.appendChild(li);

        like.href = "javascript:void(0);";
        like.onclick = function() {
            console.log(imgArray[i]);
            addLike(imgArray[i]);
        };
    }
} 

function addLike(img) {
    console.log("Liking..  " + img);
    $.ajax({
       url: 'like.php',
       type: 'POST',
       data: {
           'photo': img
       },
       success: function(likes){
           console.log(likes);
       }  
   });
}

Answer 1

問題在於，在單擊事件觸發時，imgArray [i]不存在。

嘗試像這樣...

like.href = "javascript:void(0);";
like.imgArray = imgArray[i];
like.onclick = function() {
        console.log(this.imgArray);
        addLike(this.imgArray);
    };

希望能有所幫助