jQuery plugin override parameters

Question

In this plugin want to change background color with jQuery. default background color is red, but when i am trying to override parameters then don't work that, here i am trying to set background color green. but not working, that is still red

here is code on plugin file

    (function($){
    if(!$.fn){
        $.fn = new Object();
    };

    $.fn.myBgcolor = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data("fn.myBgcolor", base);

        base.init = function(){
            base.options = $.extend({},$.fn.myBgcolor.defaultOptions, options);

            // Put your initialization code here
        };

        // Sample Function, Uncomment to use
        base.BGcolor = function(paramaters){
        base.css("background-color", base.options.bgColor); 
        };

        // Run initializer
        base.init();
        base.BGcolor();
    };

    $.fn.myBgcolor.defaultOptions = {
        bgColor: "red"
    };

    $.fn.fn_myBgcolor = function(options){
        return this.each(function(){
            (new $.fn.myBgcolor(this, options));
        });
    };

    // This function breaks the chain, but returns
    // the fn.myBgcolor if it has been attached to the object.
    $.fn.getfn_myBgcolor = function(){
        this.data("fn.myBgcolor");
    };

})(jQuery);

here is code on html file

<p class="ele">dfdfg</p>

$(".ele").myBgcolor({
bgColor: "green"
});

Answer 1

I am not sure what you are trying to achieve by the following two lines as this already refers to the jQuery object.

// Access to jQuery and DOM versions of element
base.$el = $(el);
base.el = el;

First mistake here is the extra argument el that refers to the options not to the element, so you have to remove it:

$.fn.myBgcolor = function(/* el, */ options)

And then your constructor should become like this:

$.fn.myBgcolor = function(options){
    // To avoid scope issues, use 'base' instead of 'this'
    // to reference this class from internal events and functions.
    var base = this;

    // Add a reverse reference to the DOM object
    base.data("fn.myBgcolor", base);

    base.init = function(){
         base.options = $.extend({},$.fn.myBgcolor.defaultOptions, options);
         // Put your initialization code here
    };

    // Sample Function, Uncomment to use
    base.BGcolor = function(paramaters){
         base.css("background-color", base.options.bgColor); 
    };

    // Run initializer
    base.init();
    base.BGcolor();
}; 

See the sample here http://jsfiddle.net/7Rrs3/1/