jQuery插件覆蓋參數

Question

這可能是一個非常平凡的問題，但這是我編寫的第一個jQuery插件，在理解JavaScript的作用域規則時有點模糊。

我正在嘗試編寫一個簡單的jQuery插件，該插件包裝了Stack Overflow API。 我首先嘗試使用Flair API。

我希望使該插件盡可能可配置，以便您可以輕松地將其傳遞給域和用戶ID，並生成多個Flair。

    var superUser = $.jStackOverflow.flair({domain:"superuser.com", id: 30162, parentId:'#su-flair'});
    var stackOverflow = $.jStackOverflow.flair({domain:"stackoverflow.com", id: 55954, parentId:'#so-flair'});

問題是，當它進行第二次調用時，以某種方式使用了正確的domain和id參數，但是在回調函數中用於創建HTML的parentId字段卻使用了第一個參數。

您可以在此處看到插件，並在此處看到HTML

Answer 1

更新

演示： http : //jsbin.com/epeti3/5

/* 16/02/2012 02.04.38 */
(function($) {
    $.fn.jStackOverflow = function(options) {
        var opts = $.extend({},
        $.fn.jStackOverflow.defaults, options);
        return this.each(function() {
            $this = $(this);
            var opt = $.meta ? $.extend({},
            opts, $this.data()) : opts;
            var result;
            var id = this.id;
            var flair = $.fn.jStackOverflow.flair(opt, id);
            $this.html(flair);
        });
    };
    $.fn.jStackOverflow.setApis = function(options) {
        var apis = options.protocol + options.domain + options.gTLD + "/users/flair/" + options.id + "." + options.format;
        if (options.makeCallbacks) {
            apis += "?callback=?";
        }
        return apis;
    };
    $.fn.jStackOverflow.flair = function(options, id) {
        var api = $.fn.jStackOverflow.setApis(options);
        if (options.makeCallbacks) {
            result = $.getJSON(api,
            function(data) {
                $.fn.jStackOverflow.flairCallback(data, options, id);
            });
        }
        return result;
    };
    $.fn.jStackOverflow.flairCallback = function(data, options, id) {
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                $('<div class="' + key + '"></div>').html(key + ' : ' +data[key]).appendTo('#' + id);
            }
        }
    };
    $.fn.jStackOverflow.defaults = {
        protocol: 'http://',
        domain: 'stackoverflow',
        gTLD: '.com',
        format: 'json',
        makeCallbacks: true
    };
})(jQuery);

采用：

<div id="so-flair"></div>

 $(function() {
      $('#so-flair').jStackOverflow({domain:"stackoverflow", id: 91130 });
    });

Answer 2

問題在於您只有一個插件實例。 這意味着對$.jStackOverflow.flair()的兩個調用會$.jStackOverflow.flair()干擾，因為它們都操縱單個對象的內部數據。

檢查演示，如果兩個通話之間有一些延遲（單擊底部的兩個按鈕），會發生什么情況

http://jsbin.com/esovu （編輯http://jsbin.com/esovu/edit

突然開始工作。 因此，您需要研究如何編寫在單個頁面上支持多個實例的插件。

您可以選擇多個實例都支持的任何“好” jQuery插件來檢查操作方法。

例如jQuery Carousel 。

檢查行之間的交互方式以允許在一頁上創建多個Carousel實例（代碼取自jQuery Carousel源）

$.fn.jcarousel = function(o) { //this would match your `jStackOverflow`
    return this.each(function() { //for each matched element return a new carousel
        new $jc(this, o);
    });
};
...
var defaults = {
...
};
...
$.jcarousel = function(e, o) { //the acutal constructor
...
}
...
$jc.fn.extend({
...
});