Question

这是我第一次在网站上道歉，如果这是在错误的论坛。

我正在尝试从我网站上的灯箱库的flickr集中提取图像。光库需要以下列方式编码照片：

<ul>
    <li data-type="media" data-url="FULL SIZE URL"></li>
    <li data-thumbnail-path="THUMBNAIL URL"></li>
</ul>

我想将照片插入名为<div id="test"><div>的div中。这是我在查阅Flick API常见问题并查看其他代码后制作的javascript：

$(function () {

$.ajax({
    url: 'http://api.flickr.com/services/rest/',
    data: {
        format: 'json',
        method: 'flickr.photosets.getPhotos',
        api_key: 'MY KEY',
        photoset_id: 'THE SET I'M USING',
        per_page: '50'
    },
    dataType: 'jsonp',
    jsonp: 'jsoncallback'
}).done(function (data) {
    var gallery = $('#test'),
        url;
$.each(data.photoset.photo, function (index, photo) {
        url = 'http://farm' + photo.farm + '.static.flickr.com/' +
            photo.server + '/' + photo.id + '_' + photo.secret;
        $('<ul>')
            .append($('<li>').prop('data-url', url + '_b.jpg').prop('data-type', 'media'))
            .append($('<li>').prop('data-thumbnail-path', url + '_s.jpg'))
        .appendTo(gallery);
    }); 
});

目前，我将javascript放在我的html标题中，但是当我运行页面时div是空的。

我错过了什么？

谢谢！

更新1：我在js代码的末尾错过了});。谢谢@dfsq 现在我们将部分工作添加到部分工作，但flickr数据仍未传递给li道具。这是当前插入内容的片段

<ul>
  <li></li>
  <li></li>
</ul>

更新2：将每个.prop更改为.attr，剩下的问题已经解决....

Answer 1

更正的js如下：

$(function () {

$.ajax({
    url: 'http://api.flickr.com/services/rest/',
    data: {
        format: 'json',
        method: 'flickr.photosets.getPhotos',
        api_key: 'MY KEY',
        photoset_id: 'THE SET I'M USING',
        per_page: '50'
    },
    dataType: 'jsonp',
    jsonp: 'jsoncallback'
}).done(function (data) {
    var gallery = $('#test'),
        url;
$.each(data.photoset.photo, function (index, photo) {
        url = 'http://farm' + photo.farm + '.static.flickr.com/' +
            photo.server + '/' + photo.id + '_' + photo.secret;
        $('<ul>')
            .append($('<li>').attr('data-url', url + '_b.jpg').attr('data-type', 'media'))
            .append($('<li>').attr('data-thumbnail-path', url + '_s.jpg'))
        .appendTo(gallery);
    }); 
  });
});

通过jQuery对html库的Flickr API

1 个答案: