使用动态创建的元素中的参数调用 javascript 函数

Calling a javascript function with parameters from a dynamically created element

本文关键字：参数 调用 javascript 函数 元素 动态 创建      更新时间：2023-09-26

我正在尝试使用 PHP 和 MySQL 将图片动态加载到配置文件页面，例如站点然后使用 JavaScript 将它们添加到无序列表中。我希望每个列表项也有一个 like 按钮，单击时调用 JavaScript 函数，将图像名称作为其参数。我已经搜索并找到了有关如何在不传递函数的情况下调用函数的答案任何变量，但每次我将映像名称添加到函数调用时，控制台日志都会读取"未定义"。

图片显示正常，imgArray[i]是一个包含文件名的字符串（例如照片.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);
       }  
   });
}

问题是，当点击事件触发时，imgArray[i] 不存在。

尝试这样做...

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

希望有帮助

相关文章：