Question

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应该是红色，第二个div应该是没有选项应该是默认的黑色。但两者都是黑色的。我做错了什么？

Answer 1

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

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

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

    // ...
};

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

1 个答案: