Question

我正在尝试使用我的Flickr JSON Feed将我的Feed的最新图像作为背景图像注入特定的div。

我能够拉动提要，解析图像网址，并将其记录在控制台中，但是当我尝试将其弹出到css中时，我得到了一个未被捕获的引用错误。

“未捕获的ReferenceError：未定义flickrImage”

有关如何解决此问题的任何想法？

HTML：

<div class="container">
  <div class="row">
     <div class="col-lg-12" id="images">
     </div>
   </div>
 </div>

jQuery的：

$(document).ready(function () {

    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=99895690@N00&lang=en-us&format=json&jsoncallback=?", displayImages);

        function displayImages(data) {

            // Now start cycling through our array of Flickr photo details
            $.each(data.items, function(i,item){

                // Change medium images to large
                var flickrImage = (item.media.m).replace("_m.jpg", "_b.jpg");
                console.log(flickrImage);

                // Break .each loop
                if (flickrImage) return false;

            });

        // Pop our CSS in the #images DIV
        $('#images').css('background-image', 'url('+ flickrImage +')');

        // Close down the JSON function call
        }
});

Answer 1

您必须将flickrImage移出循环才能在$.each循环之外定义：

var flickrImage;

$.each(data.items, function(i, item) {
    // Change medium images to large
    flickrImage = (item.media.m).replace("_m.jpg", "_b.jpg");
    console.log(flickrImage);

    // Break .each loop
    if (flickrImage) return false;
});

$('#images').css('background-image', 'url(' + flickrImage + ')');

使用json feed在div中注入background-image

1 个答案: