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

【问题标题】：How to use options when writing a jQuery plugin?编写 jQuery 插件时如何使用选项？
【发布时间】：2011-08-20 01:14:10
【问题描述】：

这是我的代码 (http://jsfiddle.net/nB4Hg/)：

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：

    div { width: 100px; height: 100px; margin-bottom: 10px; }

HTML：

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

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

【问题讨论】：

标签： javascript jquery plugins

【解决方案1】：

您当前的方法是接受一个名为 options 的参数，然后声明另一个名为 options 的变量来“隐藏”该参数，因此后续代码永远不会看到传入的选项。

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

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

    // ...
};

【讨论】：