加载图像使用jQuery

Question

所以我现在加载文本和图像的单独精致漂亮JSON文件，这就是我所做的，以测试它是否会工作只是一个简单的例子：

outputc+="<li>" 
    outputc+=this.name+" "+this.price+"</li>"; 
    $('#featured').append(outputc); 
    $("<img/>").attr('src',this.images).appendTo('#featured'); 

使用上面的代码工作完美，但是我需要为这两种用列表来包裹着，所以我做了一些搜索，我发现这一点：

$(document).ready(function(){ 

//loading json file 

var url = "shoppingItems.json"; 

$.getJSON(url,function(json){ 


    $.each(json.shoppingItem,function() 
    { 
     var output ='<li><img src= "'+this.images+'" alt ="'+this.name+'"></li>'; 
    }); 

    $('.items').append(output); 
}); 
}); 

以上的jQuery没有带回任何东西，有我的json文件没有任何问题，因为它已被验证，并且代码可以工作，如果我sim一般警惕它。这可能是我必须做错我的输出脚本，我看不到。

我的JSON文件可以在这里找到：Json file not loading or showing alerts

Answer 1

既然你声明它的回调函数内为var output，该output变量是局部的回调函数，一旦循环为消失。即使情况并非如此，使用=运算符将意味着每次迭代都会覆盖以前的值。

试试这个：

var output = ""; // initialize it outside the loop 
$.each(json.shoppingItem,function() 
{ 
    output += '<li><img src= "'+this.images+'" alt ="'+this.name+'"></li>'; 
}); 
$('.items').append(output); 

http://jsfiddle.net/mblase75/zB5fv/