如何从json输出生成图像组件?

时间:2012-08-25 02:34:27

标签: jquery html json

如何使用imageArray [0]中的值重新填充图像src?

$.getJSON("http://xxxx",function(data) {
    var imageArray=[];
    imageArray=data.images;
    alert(imageArray[0]);
    $('#loader').empty();
    var imageOne= '<img style="display:none;" src="imageArray[0]" id="1" wdith="100" />';
    $("#ajax_content").html(imageOne);
    $('img#1').fadeIn();
});

我想重新填充imageArray [0],如下所示

var imageOne= '<img style="display:none;" src="http://i2.cdn.turner.com/cnn/dam/assets/120824111207-storm-isaac-t1-main.jpg" id="1" wdith="100" />';

@thanks undefined

我希望将它们全部放在一个数组中并仅显示第一个图像。稍后我将继续使用上一个/下一个按钮继续下一个图像。你可以找到以下工作吗?

for (var i=0;i<imageArray.length;i++){
                        imageOne[i]='<img style="display:none;" src="'+imageArray[i]+'" id="i" wdith="100" />;';
                    }
                    $("#ajax_content").html(imageOne);
                    $('img#1').fadeIn();

2 个答案:

答案 0 :(得分:0)

您需要将src="imageArray[0]"更改为src=\"' + imageArray[0] + '\"

现在您为src插入的所有内容都是“imageArray [0]”。您需要让JavaScript对其进行评估,以便它可以为imageArray[0]插入正确的值。

答案 1 :(得分:0)

$.getJSON("http://xxxx", function(data){
    var imageArray=[];
    imageArray = data.images;
    $('#loader').empty();
    for (var i = 0; i < imageArray.length; i++) {
        var img = '<img style="display:none;" src="'+imageArray[i]+'" id=img"'+i+'" wdith="100" />';        
        $("#ajax_content").append(img);
        $('#img'+i).fadeIn();
    }
});

更新

var img = [];
for (var i = 0; i < imageArray.length; i++) {
    img[i] = '<img style="display:none;" src="'+imageArray[i]+'" id="'+(i+1)+'" width="100"/>';
}
$("#ajax_content").html(img[0]);
$('img#1').fadeIn();

请注意,如果您网页的文档类型不是HTML5,则ID必须以字母开头,并且还要注意字符串文字中存在拼写错误 wdith应为{{1 }}。