jQuery插件覆盖参数

这可能是一个非常平凡的问题，但这是我写的第一个jQuery插件，我对理解JavaScript中的作用域规则有些模糊。jQuery插件覆盖参数

我想写一个简单的jQuery插件，包装堆栈溢出API。我开始尝试使用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

来源

2010-03-13 Travis

更新创建多个旋转木马实例

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 + "https://stackoverflow.com/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 }); 
    });

来源

2010-03-13 12:02:02

哇，我不期待一个完整的重写，只是一些一般指导。我想我需要花一些时间阅读更多关于Javascript中的对象。非常感谢您的帮助。 – Travis 2010-03-13 19:03:55

没问题兄弟！ ;-) – 2010-03-13 19:10:43

的问题是，你只需要你的插件的一个实例。这意味着两个对$.jStackOverflow.flair()的调用会互相干扰，因为它们都处理单个对象的内部数据。突然它开始工作

检查演示，如果有两个电话（点击底部的两个按钮）之间存在一些延迟会发生什么

http://jsbin.com/esovu（编辑http://jsbin.com/esovu/edit

。所以，你需要研究如何写它支持单页上多个实例的插件。

你可以选择任何“好”的jQuery插件，多个实例支持，以检查该怎么做。

例如jQuery Carousel。

检查怎么行互动，让一个页面（代码jQuery的旋转木马源获取）

$.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({ 
... 
});

来源

2010-03-13 10:20:52 jitter

jQuery插件覆盖参数

回答

相关问题