Instagram API 不显示标题和超链接

Question

我通过 jQuery 使用位置 lat/lon 参数创建了一个 Instagram 请求。我将返回所有相关的缩略图，最多计数 100 个，以及：

1. Title = 标题，如果标题不为空（鼠标悬停时）
2. 发布图片的用户。
3. 图片发布日期。
4. standard_resolution.url 的超链接（点击缩略图）

以下请求返回缩略图、用户和发布日期。但是，当鼠标悬停并单击时，不会显示到 stardard_resolution.url 的标题/标题和超链接。

我相信我的追加语句语法是错误的，但无法弄清楚。这是代码和FIDDLE

(function ($) {
$(document).ready(function () {


    var count = "100";
    var access_token = "<REMOVED BY CATSHOES - IS THIS SUPPOSED TO BE SECRET?>";
    var access_parameters = {
        access_token: access_token
    };

    function grabImages(access_parameters) {
        var instagramUrl = "https://api.instagram.com/v1/media/search?lat=19.951204000000&lng=-155.860291000000&name=xxx&distance=400&callback=?&count=" + count;


        $.getJSON(instagramUrl, access_parameters, onDataLoaded);
    }

    function onDataLoaded(instagram_data) {
        if (instagram_data.meta.code == 200) {
            var photos = instagram_data.data;
            if (photos.length > 0) {
                for (var key in photos) {
                    var photo = photos[key];
                    var a_href = photo.images.standard_resolution.url;
                    var img_title = "";
                    var date = new Date(parseInt(photo.created_time) * 1000);

                    if (photo.caption != null) {
                        img_title = photo.caption.text;
                    }


                    $("#target").append('<a class="preview" href="' + a_href + "'  title='" + img_title + '" ></a> <img src ="' + photo.images.thumbnail.url + '"><div>\
                            ' + "Posted by: ", photo.user.full_name + '<br />\
                            ' + "Posted on: ", (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear() + '<br />\
                        </div />');
                }

            } else {
                $("#target").append("Currently no Instagram photos for this location.");
            }

        } else {
            var error = data.meta.error_message;
            $("#target").append('Photos for this location will display soon.  Instagram message: ' + error);
        }
    }
    grabImages(access_parameters);

});

})(jQuery);

Answer 1

你在HTML中有一堆小错误，img标签不在锚标签内，所以图片没有链接，img“src”结束引号和“title”开始引号不正确。如果您进行此更改，效果很好：

$("#target").append('<a class="preview" href="' + a_href + '"  title="' + img_title + '" > <img src ="' + photo.images.thumbnail.url + '"></a><div>\
                            ' + "Posted by: ", photo.user.full_name + '<br />\
                            ' + "Posted on: ", (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear() + '<br />\
                        </div />');

这里已更新fiddle，鼠标悬停图像有效。