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文件没有任何问题，因为它已经过验证，如果我只是提醒它，代码就可以了。这可能是我在输出脚本上做错了，我看不到。

我的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/

使用jquery从json文件加载图像

1 个答案: