这可能是一个非常平凡的问题,但这是我写的第一个jQuery插件,我对理解JavaScript中的范围规则有点模糊。
我正在尝试编写一个包含Stack Overflow API的简单jQuery插件。我开始尝试使用Flair API。
我想让插件尽可能配置,以便您可以轻松地将其传递给域名和用户ID,并生成多个Flairs。
var superUser = $.jStackOverflow.flair({domain:"superuser.com", id: 30162, parentId:'#su-flair'});
var stackOverflow = $.jStackOverflow.flair({domain:"stackoverflow.com", id: 55954, parentId:'#so-flair'});
问题是,当它进行第二次调用时,它以某种方式使用正确的域和id参数,但它在回调函数中用于创建HTML的parentId字段使用的是第一个参数。
您可以看到plugin here和HTML here
答案 0 :(得分:3)
已更新
DEMO: 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 });
});
答案 1 :(得分:0)
问题是你只有一个插件实例。这意味着对$.jStackOverflow.flair()
的两次调用会相互干扰,因为它们都会操纵单个对象的内部数据。
检查演示如果两次通话之间有一些延迟会发生什么(单击底部的两个按钮)
http://jsbin.com/esovu(编辑http://jsbin.com/esovu/edit
突然间它开始工作了。因此,您需要研究如何在单个页面上编写支持多个实例的插件。
您可以选择任何“好”的jQuery插件,多个实例支持这些插件来检查如何操作。
e.g。 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({
...
});