$(this) 不适用于 Flickr 图库答案

【问题标题】：$(this) not working with Flickr Gallery$(this) 不适用于 Flickr 图库
【发布时间】：2013-11-29 10:05:44
【问题描述】：

请在此处查看我的代码笔以了解此问题： http://codepen.io/dsm/pen/ewEJb

此应用程序将显示两个 Flickr 画廊。我试图将函数分离为完全独立于函数调用。但是，我目前可以让它工作的唯一方法是对这些行进行硬编码以包含 div id '#flickr'。我尝试改用 $(this) 但似乎没有合作。

有什么建议吗？

$('#flickr').append('<h2>'+photosetTitle+'</h2>');
$('#flickr').append(theHtml);

以上是有问题的代码行，可以在下面的代码中看到。

注意：此代码假定 jquery 已加载。

(function($){
    $.fn.flickrSetGallery = function(callerSettings) { 
        var settings = $.extend(callerSettings); 
        var url = 'http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=';
        url += settings.apiKey;
        url += '&photoset_id=';
        url += settings.photosetID;
        url += '&format=json&jsoncallback=?';   
        $.getJSON(url, displayImages);
        function displayImages(data) {
            var photosetTitle = data.photoset.title;
            var photosetTag = photosetTitle.toLowerCase().trim().split(/\s+/).join
            var theHtml = "";
            $.each(data.photoset.photo, function(i,photo){
                var source = 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_s.jpg';
                theHtml+= '<li><a href="http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_b.jpg" data-lightbox="'+photosetTag+'">';
                theHtml+= '<img title="'+photo.title+'" src="'+source+'" alt="'+photo.title+'" />';
                theHtml+= '</a></li>';              
            });
            $('#flickr').append('<h2>'+photosetTitle+'</h2>');
            $('#flickr').append(theHtml);
        };
    };
})(jQuery);

$(document).ready(function() {
    $('#flickr').flickrSetGallery({
        apiKey: '2eabc9d4b3a1b7443b2900a729b8b4a8',
        photosetID: '72157616127960344'        
    });
    $('#flickr2').flickrSetGallery({
        apiKey: '403e03feaf4819a91a02f158a0504075',
        photosetID: '72157637557971086'    
    });
});

这是 HTML：

<div id="flickr" class="flickr-things">
</div>

<div id="flickr2" class="flickr-things">
</div>

【问题讨论】：

标签： javascript jquery api gallery flickr

【解决方案1】：

尝试这种方式，在回调中使用 this 不会将原始元素定位为 jqXhr 对象，因此您可以将其缓存到变量并使用它：

在 ajax 调用之前：

var flickrContainer = this; //this is already a jquery object here
$.getJSON(url, displayImages);

......

在你的回调中使用它：

  flickrContainer.append('<h2>'+photosetTitle+'</h2>');
  flickrContainer.append(theHtml);

Demo

还有其他方法以及使用$.proxy function.bind 等将ajax 回调的上下文绑定到元素的上下文。

 $.getJSON(url, displayImages.bind(this)); // or $.proxy(displayImages,this)

现在你函数中的this 代表flickerContainer，所以你可以这样做：

  this.append('<h2>'+photosetTitle+'</h2>');
  this.append(theHtml);

【讨论】：

完美的解释和解决方案！谢谢！

【解决方案2】：

那是因为$(this) 不是包含闪烁元素的 jQuery 对象，直到您 return the object from the plugin

return this.each(function(){
    var $this = $(this);
    //now $this contains the jQuery object of the element/s bound to the plugin
});

【讨论】：