Javascript 编写jQuery插件时如何使用选项？

这是我的代码（）：

JQuery：

// plugin code
(function($) {
    $.fn.coloredDiv = function(options) {

            // defaults
            var options = {
                 'color' : 'black'
            };

            $(this).css('background', options.color);

    }
})(jQuery);


        // use the plugin
        $(function() {

            $("#foo").coloredDiv({ 'color' : 'red' });
            $("#bar").coloredDiv();

        });

CSS:

HTML:

---

现在我正在尝试学习如何在编写插件时使用选项。在我的代码中，我试图做的是指定第一个div应该是红色的，第二个div因为没有选项，所以应该是默认的黑色。然而，两者都是黑色的。我做错了什么？

您当前的方法是接受一个名为

options

的参数，然后声明另一个名为

options

的变量“隐藏”参数，因此传入的选项永远不会被后续代码看到

相反，您应该声明默认选项，然后使用覆盖用户传入的默认选项（如果适用）：

$.fn.coloredDiv = function (userOptions) {
    var options = $.extend({
        color: "black"
    }, userOptions);

    // ...
};

<div id="foo"></div>
<div id="bar"></div>

$.fn.coloredDiv = function (userOptions) {
    var options = $.extend({
        color: "black"
    }, userOptions);

    // ...
};