我是JQuery的新手,非常感谢任何帮助.
“使用$.getJSON函数,检索所提供的items.json文件中的数据,并在下面的图库中显示图像.图库应以大致缩略图大小显示每个图像,其标题位于桌面分辨率下的3列网格中“.
我能够在HTML页面上输出.json,现在我想知道如何在HTML页面上显示实际图像而不是图像的URL路径？这是当前输出到HTML页面的内容：
> URL：images / image_1.jpg
>标题：图片1标题
> URL：images / image_2.jpg
>标题：图片2标题
> URL：images / image_3.jpg
>标题：图片3标题
> URL：images / image_4.jpg
>标题：图片4标题
items.json
{
"items": [
{
"url": "images/image_1.jpg","caption": "Image 1 Caption"
},{
"url": "images/image_2.jpg.jpg","caption": "Image 2 Caption"
},{
"url": "images/image_3.jpg.jpg","caption": "Image 3 Caption"
},{
"url": "images/image_4.jpg.jpg","caption": "Image 4 Caption"
}
]
}
scripts.js中
$(document).ready( function(){
$.getJSON('images.json',function(data) {
$.each(data.items,function(i,f) {
$("ul").append("<li>URL: "+f.url+"</li><li>Caption: "+f.caption+"</li><br />");
});
});
});
解决方法
尝试这个：
$.getJSON('items.json',function(data) {
$.each(data.items,f) {
$("ul").append("<li>URL: "+f.url+"</li><li>Caption: "+f.caption+"</li><br />");
});
});
