Uncaught TypeError: Невозможно установить свойство 'передний план' из неопределенного

Question

Это мой базовый c jquery код плагина, и после применения этого кода я получаю ошибку

Uncaught TypeError: Невозможно установить свойство 'передний план' из неопределенного

(function($){

    $.fn.myPlugin = function(options){

        var settings = $.extend({}, $.fn.myPlugin.default, options);

        $.fn.myPlugin.default = {
            foreground: "red",
            background: "green"
        };
    }

}(jQuery));

И здесь я пытаюсь получить к нему доступ с помощью этого кода плагина

    $.fn.myPlugin.default.foreground = "blue";

    $(".testDemo").myPlugin();

Кто-нибудь может помочь мне решить эту проблему! пожалуйста, запрос

Answer 1

Я вижу пару проблем в этом коде:

1. В одном месте вы используете $.fn.myPlugin.defaults (множественное число), в двух других местах вы используете $.fn.myPlugin.default (единственное) .
2. Ваш код, создающий объект $.fn.myPlugin.default, внутри вашей функции плагина (и после вашего кода, пытающегося его использовать).

Это # 2, что вызывает указанную ошибку c, которую вы получаете, потому что когда вы go используете плагин, эта строка пытается использовать то, чего не существует:

$.fn.myPlugin.default.foreground = "blue";

Вы должны создать defaults / default объект один раз , вне функции плагина, при настройке плагина.

Примерно так:

(function($){
    $.fn.myPlugin = function(options){
        var settings = $.extend({}, $.fn.myPlugin.defaults, options);
        // ...do the plugin's work here, typically inside a `this.each(/*...*/);` callback, and return `this`
    };

    $.fn.myPlugin.defaults = {
        foreground: "red",
        background: "green"
    };
}(jQuery));

Затем, используя его, не пишите defaults, передайте параметры:

$(".testDemo").myPlugin({foreground: "blue"});

Live Пример:

(function($){
    $.fn.myPlugin = function(options){
        var settings = $.extend({}, $.fn.myPlugin.defaults, options);
        // ...do the plugin's work here, typically inside a `this.each(/*...*/);` callback, and return `this`
        return this.each(function() {
            $(this).css({
                color: settings.foreground,
                backgroundColor: settings.background
            });
        });
    };

    $.fn.myPlugin.defaults = {
        foreground: "red",
        background: "green"
    };
}(jQuery));

$(".testDemo").myPlugin({
    foreground: "blue",
    background: "#ddd"
});

<div class="testDemo">This is a .testDemo element</div>
<div class="testDemo">This is another .testDemo element</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>