Question

我是制作jQuery插件的新手，每次都有一个问题我偶然发现。下面的插件是一个简单的插件，可以根据用户名或Facebook网址为页面或用户个人资料链接嵌入facebook likebox。当它被执行一次时，它就像一个魅力。

多次执行时，只有最后一个用$ .ajax部分填充。如果我是console.log（$ this）那么就是最后一个。

看起来ajax调用中的$ this被覆盖了......当我在插件中使用另一个（）时，它也会发生在其他插件中。

我希望我很清楚，我试图把它放在一个jsFiddle中，但我得到错误“输入纯JavaScript代码，没有HTML。”

jQuery.fn.facebookEmbed = function( options ) {

var defaults = {
    likebox: "Loading facebook...",
    faces: false,
    stream: true,
    header: false,
    width: 252,
    customClass: 'facebookembed',
    account: "skrillex"
};  

var settings = $.extend( {}, defaults, options );

if(!$('#fb-root').length) { $('body').prepend('<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>'); }

return this.each(function() {

    $this = $(this);
    $this.addClass(settings.customClass);

    if(settings.loading) { $(this).html('<span class="facebook-loading">'+settings.loading+'</span>'); }

    var url = ($this.attr('data-account')) ? $this.attr('data-account') : settings.account;

    if(!/facebook.com/.test(url)) {
        url = "http://www.facebook.com/"+url;
    }
    var user = (/pages/.test(url)) ? url.split("/").pop() : url.match(/https?:\/\/(www\.)?facebook\.com\/(#!\/)?@?([^\/]*)/)[3];

    // here begins the trouble, i think
    $.ajax( {
        url: 'http://graph.facebook.com/'+user
        , dataType: 'json'
        , success: function( data ) { 
            if(data.category) {
                // I guess $this is overwritten somehow?
                $this.html('<div class="facebookembed"><fb:like-box href="'+url+'"  width="'+settings.width+'" show_faces="'+settings.faces+'" stream="'+settings.stream+'" header="'+settings.header+'"></fb:like-box></div>');
            } else {
                $this.html('<div class="facebookuser"><a href="'+url+'" target="_blank"><img src="http://graph.facebook.com/'+user+'/picture" /> Wordt vrienden met <strong>'+data.name+'</strong> op Facebook</a>');
            }
        }
        , error: function( data ) { $this.text('Deze gebruiker bestaat niet of niet meer...'); }
    } );

});
};

HTML：

<div class="facebook-feed" data-account="skrillex"></div>
<div class="facebook-feed" data-account="noisia"></div>
etc..
<script type="text/javascript">$('.facebook-feed').facebookEmbed();</script>

Answer 1

如果不进行测试，您似乎在全局范围内使用$this。要将其保留在本地范围，请将var添加到声明中：

var $this = $(this);

Answer 2

您是否尝试过context选项？

$.ajax( {
    url: 'http://graph.facebook.com/'+user
    , context: $this
    , ...

来自documentation：
此对象将成为所有与Ajax相关的回调的上下文。默认情况下，上下文是一个对象，表示调用中使用的ajax设置（$ .ajaxSettings与传递给$ .ajax的设置合并）。

在代码中，在ajax调用返回之前，将$this变量设置为新对象。假设在最后$this方法中设置each后，所有ajax调用都会返回。

插件中的父变量被覆盖

2 个答案: