选项内的jQuery插件设置选项

Question

Not sure if my Title is the right way to ask how to do this but...
Here i have a plug-in called func which sets default options:

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

    var settings = $.extend({
        color:'white',
        hoverColor: 'black'
    },options);

    return this.each(function(){
        if(settings.color){
            $(this).css('color',settings.color);
        }
        if(settings.hoverColor){
            $(this).css('color',settings.hoverColor);
        }
    }

Now here is where the user can change the color of the text to what they want:

$('#selector').func({
    color:'blue',
    hoverColor: 'green'
});

Now here is what i want to accomplish: I want to be able to break up the hover and link options to look like the following:

$('#selector').func({
    link:
        color: 'blue'
    ,hover:
        color: 'green'
});

Similar to jQuery validation plug-in HERE where they break up the rules and the message options. Let me know if you need additional information. Thanks for any and all help.

Answer 1

The syntax in what you want to accomplish is invalid so you will always get a syntax error.

Try

$('#selector').func({
    link: {color: 'blue'},
    hover: {color: 'green'}
});

Of course you will have to use the same structure in the initial settings object ( use the deep copy version of $.extend , by providing true as the first argument, since we are using objects )

var settings = $.extend(true, {
        link: {color: 'white'},
        hover: {color: 'black'}
    },options);

and you access them with settings.link.color and settings.hover.color