Question

我已经制作了一个jQuery插件，它的工作原理非常好。除了当我在同一页面上有多个实例时，最后一个实例的选项/设置用于两者。

这是一个精简版本...抱歉长度。

(function() {

    var settings = {};
    var defaults = {
        duration : 1000,
        easingShow : 'easeOutBounce',
        easingHide : 'easeOutQuad'
    };

    var methods = {
        init : function(options) {

            return this.each(function(n) {

                settings = $.extend(defaults, options);

            });

        },

        show : function() {

            // settings used here
        },

        hide : function() {
            // also used here
        }
    };

    $.fn.expander = function(method) {

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.expander');
        }

    };

})(jQuery);

我确定它是某种命名空间问题，因为我经常感到困惑。

由于

Answer 1

使用

settings = $.extend(true, {}, defaults, options);

来自jquery docs @ http://api.jquery.com/jQuery.extend/

deep     If true, the merge becomes recursive (aka. deep copy).
target   The object to extend. It will receive the new properties.
object1  An object containing additional properties to merge in.
objectN  Additional objects containing properties to merge in.

请记住，目标对象（第一个参数）将被修改，并且也将从$ .extend（）返回。但是，如果我们想保留两个原始对象，我们可以通过传递一个空对象作为目标来实现。

要为每个元素设置不同的设置，可以使用.data()

将它们存储在每个元素中

查看有效的演示：http://jsfiddle.net/roberkules/XvKs8/

具有默认和多个实例的jquery设置

1 个答案: