如何在編寫jQuery插件時使用選項？

Question

這是我的代碼（ 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應該是紅色，第二個div應該是沒有選項應該是默認的黑色。 但兩者都是黑色的。 我究竟做錯了什么？

Answer 1

您當前的方法是接受名為options的參數，但隨后聲明另一個名為options變量“陰影”參數，因此后續代碼永遠不會看到傳入的選項。

相反，您應聲明默認選項，然后使用$.extend將這些默認值覆蓋用戶傳入的默認值，如果適用：

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

    // ...
};