Question

我的插件必须为每个对象做不同的事情，同时我需要能够调用各种方法，并做许多其他事情。

我想在这里发生的是，当用户点击first按钮时，它应该调用test_one div的函数而不是test_two。

<button class="test_one">First</button >

<button class="test_two">Second</button >

<div class="called_for"></div>

(function($){
    var globalSettings = {
        success: function(){}
    };

    var methods = {
        init : function(options){
            settings            = $.extend({},globalSettings,options);

            $(this).click(function(){
                settings.success();                
            });                
        }                
    }

    $.fn.test = function(method, options){
        if(methods[method])
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        else if(typeof method === 'object' || !method)
            return methods.init.apply(this, arguments);
        else
            $.error('Method ' + method + ' does not exist');
    };

})(jQuery);


$(".test_one").test({
    success: function(){
        $(".called_for").text("I got called for 'test_one'");
    }
});


$(".test_two").test({
    success: function(){
         $(".called_for").text("I got called for 'test_two'");
    }
});

Answer 1

您没有声明settings，因此它是全局的，因此被第二个插件调用覆盖。请使用var：http://jsfiddle.net/q6e38/4/。

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

Answer 2

使用此骨架，运行良好： https://github.com/OscarGodson/jQuery-Plugin-Skeleton

jQuery不同的插件实例

2 个答案: