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

时间:2014-12-16 14:16:14

标签: javascript onclick parameter-passing href function-call

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

图片显示正常,imgArray [i]是一个包含文件名称的字符串(例如photo.jpg) 但是

console.log(imgArray[i]) 
onclick函数中的

读取undefined。我也试过了

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);
       }  
   });
}

1 个答案:

答案 0 :(得分:2)

问题是,当click事件触发时,imgArray [i]不存在。

尝试这样做......

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

希望有所帮助