0

関数を使用した JQuery 拡張機能がありますが、インスタンスのオプションにアクセスする方法がわかりません。

    (function ($) {

    $.fn.MyExtension= function (methodOrOptions) {
        if (methods[methodOrOptions]) {
            return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
            // Default to "init"
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + methodOrOptions + ' does not exist on jQuery.MyExtension');
        }
    };

    var methods = {
        init: function (options) {
            var defaults = {
                testOption: "test"
            };
            options = $.extend(defaults, options);

            return this.each(function () {
                 // Code logic goes here
            }

        MyFunction: function () {
            var optionVal = options.testOption;
        }
    };

})(jQuery);

したがって、このコードは MyFunction を呼び出すとエラーをスローします。これは、「オプション」が何であるかがわからないためです。

4

2 に答える 2

1

要素のデータ オブジェクトに格納します。http://jsfiddle.net/U7QT5/

(function ($) {

    $.fn.MyExtension = function (methodOrOptions) {
        if (methods[methodOrOptions]) {
            return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
            // Default to "init"
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + methodOrOptions + ' does not exist on jQuery.MyExtension');
        }
    };

    var methods = {
        init: function (options) {
            var defaults = {
                testOption: "test"
            };
            return this.each(function () {
                var $this = $(this);
                $this.data("MyExtension",$.extend(defaults, options));
                // Code logic goes here
            });
        },
        MyFunction: function () {
            var optionVal = this.data("MyExtension").testOption;
            console.log(optionVal);
        }
    };

})(jQuery);

$("body").MyExtension({testOption: "foobar!"}).MyExtension("MyFunction");
于 2013-05-08T18:32:44.683 に答える
0

したがって、これは単純なスコープの問題にすぎないと思います。に渡されるオブジェクト オプションがありますがinit、それはその関数に対してローカルです。MyFunction他の関数がスコープを持つように、オブジェクトに配置する必要があります。

var methods = {
    init: function (options) {
        var defaults = {
            testOption: "test"
        };
        this.currentOptions = $.extend(defaults, options);

        return this.each(function () {
             // Code logic goes here
        }

    MyFunction: function () {
        var optionVal = this.currentOptions.testOption;
    }
};
于 2013-05-08T18:30:42.457 に答える