Question

在通过ajax完全加载后，我一直无法在页面上显示我的图像。我做了一些研究并解决了这个问题：

var img = $('<img id="img-photo-1" />').attr('src', data+'.png').load(function(){
                $("#jacket").html(img);
            });

哪个好，但是我也希望用AJAX返回的链接包装图像，所以我尝试了这个：

 img1 = $('<img id="img-photo-1 />').attr('src', data).load(function(){ 
           $("div#photo1").html('<a class="shadowbox" id="link-photo-1" href="'+data+'">'+img1+'</a>');
        });

但是这会将图像显示为对象，而不会呈现为图像。关于如何解决这个问题的任何想法，我相信它可以通过类似的方法来完成，欢呼

Answer 1

由于img1是一个jQuery对象，因此不能像字符串一样使用它。尝试使用append将其添加到DOM。

img1 = $('<img id="img-photo-1 />').attr('src', data).load(function(){ 
    var $html = $('<a class="shadowbox" id="link-photo-1" href="'+data+'" />');
    $html.append(img1);
    $("div#photo1").empty().append($html); // I used empty(), because html() would replace anything inside the div
});

Answer 2

您的img1 var是一个jquery元素。因此，您可能需要返回img1.html()以连接您正在构建的锚标记字符串：

img1 = $('<img id="img-photo-1 />').attr('src', data).load(function(){ 
           $("div#photo1").html('<a class="shadowbox" id="link-photo-1" href="'+data+'">'+img1.html()+'</a>');
        });

使用jQuery＆amp ;;加载图像/链接AJAX

2 个答案: