jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 使用jquery从json文件加载图像大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我有一个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

解决方法

由于您在回调函数中将其声明为var输出,因此输出变量是该回调函数的本地变量,并在循环完成后消失.即使不是这种情况,使用=运算符也意味着您在每次迭代时都会覆盖先前的值.

试试这个:

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/

大佬总结

以上是大佬教程为你收集整理的javascript – 使用jquery从json文件加载图像全部内容,希望文章能够帮你解决javascript – 使用jquery从json文件加载图像所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: