jQuery插件在一个选项里面设置选项

Question

不确定我的标题是否是询问如何执行此操作的正确方法，但是...
这里我有一个名为 func 的插件，它设置默认选项：

(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);
        }
    }

现在用户可以在此处将文本颜色更改为他们想要的颜色：

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

现在这是我想要完成的事情：我希望能够分解悬停和链接选项，如下所示：

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

类似于 jQuery 验证插件HERE，它们分解了规则和消息选项。如果您需要更多信息，请告诉我。感谢您的所有帮助。

Answer 1

你想要完成的语法是无效的，所以你总是会遇到语法错误。

试试

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

当然，您必须在初始 settings 对象中使用相同的结构（使用深拷贝版本的 $.extend，通过提供 true 作为第一个参数，因为我们正在使用对象)

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

您可以通过settings.link.color 和settings.hover.color 访问它们