Question

我在下面编写了一个jQuery插件，希望能够再次为元素上的相同实例调用它。

插件去了......

(function($) {
    $.fn.myPlugin = function(options){

        var settings = {
            color: null
        };

        if (options) {  
            $.extend(settings, options);
        }

        return this.each(function(){
            var self = this;
            var pics = $('li', self);

            function refresh() {
                pics = $('li', self);
            };

            $('a', self).click(function(){
                pics.filter(':last').remove();
                alert(settings.color);
                refresh();
                return false;
            });
        });
    }
})(jQuery);

在页面中，这称为......

$('#test').myPlugin({ color: 'blue' });

现在我想为同一个实例调用相同的插件，但是传递字符串refresh作为选项，而所有其他变量都是相同的（所以颜色仍然是blue）例如..

$('#test').myPlugin('refresh');

然后执行refresh()函数。

我怎样才能实现上述目标？

编辑为了更清楚，我正在考虑jQuery UI如何完成插件。在sortable插件中，您可以在同一元素上执行$("#sortable").sortable();，然后$("#sortable").sortable('refresh');。这就是我想要实现的目标。

Answer 1

您可以使用.data()存储您的实例，并在创建实例时检查它。

类似的东西：

$.fn.doStuff = function () {
  var ob = $(this);
  var data = ob.data();
  if (data.doStuff !== undefined) {
    return data.doStuff;
  }
  doStuff;
});

Answer 2

(function($) {
$.fn.myPlugin = function(options){
    var init = function($self, ops){
        $self.find("a").click(function(){
            pics.filter(':last').remove();
            alert(settings.color);
            refresh();
            return false;
        });
    };  

    this.refresh = function(){
       //your code here
    };

    return this.each(function(){
        var self = this;
        var pics = $('li', self);
        var settings = {
            color: null
        };    

        var ops = $.extend(true, settings, options);

        init($(this), ops);            

    });
}
})(jQuery);

尝试这样的事情。你可以像$（）。myPlugin（）。refresh（）;

一样调用refresh（）

调用jQuery插件的同一个实例

2 个答案: