Jquery plugin writing: How do I use the options in my code?

Question

So I'm converting a plugin. Originally I had a traditional javascript function with some variables I pass in, but I wanted to make it a full Jquery plugin with options. The documentation shows you how to set them up, but not how to use them in your code. Here's a bit of the code:

jQuery.fn.placeholderRX = function(options) {
    var settings = jQuery.extend({
        hoverColor: '#fff',
        addClass: 'null',
        textColor: '#FBFBFB'        
    }, options);

    var $this = $(this);

    $this.children('.inputSpan').each(function() {      
            $(this).children('.inputText').hover( 
                function() {
                    $input.children('.input').css('background-color', hoverColor);
                },
                function() {
                    $input.children('.input').css('background-color', revertColor);
                }
            );
        }       
    });
};

How would I pass that color option value to the hover function beneath it? Or more simply, can I just pass the option value to a variable?

Answer 1

You have declared a variable called settings . You can access the hoverColor property of that object with settings.hoverColor :

$input.children('.input').css('background-color', settings.hoverColor);

The options argument to your plugin will be an object too. When you pass that in, the extend method will merge the contents of the options object and the "defaults" object, and you assign the result of that merge to settings .

Answer 2

The following should work:

$input.children('.input').css('background-color', settings.hoverColor);

Or what jcreamer898 said works as well:

$input.children('.input').css('background-color', settings['hoverColor']);

Answer 3

这应该工作...

$input.children('.input').css('background-color', settings['hoverColor'])