jquery - Tumblr API jQuery 随机图像

Question

我想要一个随机图像作为 div 元素中的背景。
我使用 tumblr API 从 tumblr 获取图像。
以下代码有效，但仅获取找到的最后一个图像，如何从数组中获取随机图像？

Working Example: jsfiddle.net/StevendeJong/9pzhh9z5/2

$(document).ready(function (){
    var link = "http://api.tumblr.com/v2/blog/www.unsplash.com/posts?";
    $.ajax({
        type: "GET",
        url : link,
        dataType: "jsonp",
        data: {
            api_key: "ClAjag2DrKwJhbFY1aAAwqBUxEFBEOBwc7AzMwXlcaNlp3gZte"
        }
    }).done(function( data ) {

        $.each(data.response.posts, function(){

            var _photos = this.photos;

            $.each(_photos, function(){
                $('.background').css({
                    "background-image": "url(" + this.original_size.url + ")"
                });
            });
        });
    });
});

Answer 1

请尝试这个:

当您迭代每个列表时，您将获得最终结果。

查看更新的 fiddle :

http://jsfiddle.net/9pzhh9z5/3/

$(document).ready(function () {
    var link = "http://api.tumblr.com/v2/blog/www.unsplash.com/posts?";
    $.ajax({
        type: "GET",
        url: link,
        dataType: "jsonp",
        data: {
            api_key: "ClAjag2DrKwJhbFY1aAAwqBUxEFBEOBwc7AzMwXlcaNlp3gZte"
        }
    }).done(function (data) {

        var url = $.rand(data.response.posts);
        url = url.photos[0].original_size.url;
        console.log(url);
        console.log($.rand(data.response.posts));
        $('DIV.background').css('background-image', 'url(' + url + ')');;

        });
    });

我正在使用此函数来随机化数组:

//random function. 
(function ($) {
            $.rand = function (arg) {
                if ($.isArray(arg)) {
                    return arg[$.rand(arg.length)];
                } else if (typeof arg == "number") {
                    return Math.floor(Math.random() * arg);
                }
            };
        })(jQuery);

更新 要获取 1280 尺寸(如果可用)，您可以添加此检查:

 var url = $.rand(data.response.posts);
 var alt = url.photos[0].alt_sizes[0];
 url = alt.width == 1280 ? alt.url : url.photos[0].original_size.url;

更新的 fiddle : http://jsfiddle.net/9pzhh9z5/5/