JQuery附加'[object,Object]'而不是图像

时间:2011-10-24 23:17:23

标签: javascript jquery html json

我正在使用JQuery的$.getJSON函数来下载一些图像的URL,我试图在div中输出它们。我想让输出看起来像这样:

<a href="the image url (shot.short_url)"><img src="the direct image url (shot.image_teaser_url)" /></a>

但是,它输出的是:

<div id="body-wrapper">
    <a href="http://drbl.in/300896">[object Object]</a>
    <a href="http://drbl.in/298080">[object Object]</a>
    <a href="http://drbl.in/290395">[object Object]</a>
    <a href="http://drbl.in/290324">[object Object]</a>
    <a href="http://drbl.in/268595">[object Object]</a>
    <a href="http://drbl.in/265197">[object Object]</a>
    <a href="http://drbl.in/256368">[object Object]</a>
    <a href="http://drbl.in/252519">[object Object]</a>
    <a href="http://drbl.in/242235">[object Object]</a>
    <a href="http://drbl.in/241676">[object Object]</a>
</div>

在输出图像的情况下,请告诉我哪里出错了?

这是我的代码:

function work() {
            $('#body-wrapper').empty();
            $.getJSON("http://dribbble.com/jakekrehel/shots.json?callback=?", function(data){
                $.each(data.shots, function(i,shot){
                  var image = $('<img/>').attr('src', shot.image_teaser_url);
                  var title = '<a href=\"' + shot.short_url + '\">';
                  var string = title;
                  string = string + image;
                  string = string + '</a>';
                  $('#body-wrapper').append(string);
                });
              });
        }

2 个答案:

答案 0 :(得分:2)

image是一个jQuery对象,而不是一个String - 所以将它附加到String将生成[object Object]

理想情况下,将所有内容都更改为对象 - 例如

$('#body-wrapper').append(
    $("<a/>",{"href": shot.short_url}).append(
    $("<img/>",{"src": shot.image_teaser_url}));

或作弊并做到这一点     string = string + image.html();

要么应该工作

注意:我输入了没有语法检查的那些,并且有很多括号,做得最好!

答案 1 :(得分:0)

.each()回调

中尝试此操作
// create image
var image = $('<img>').attr('src', shot.image_teaser_url);

// create anchor and append image
var anchor = $('<a>').attr('href', shot.short_url).append(image);

// append anchor to container
$('#body-wrapper').append(anchor);