Question

我试图制作我的第一个jquery插件（灯箱）。它按照我想要的方式在单个元素上工作，但如果我使用多个元素，它会覆盖我的选项。

这是我目前的代码。由于布局，它似乎不适用于jsFiddle。

http://jsfiddle.net/BjwCm/

您可以在此处下载带有工作（失败）示例的代码：

http://frumbert.org/files/frumbox.zip

我可以看到，当我绑定到第二个对象但不知道我做错了什么时，我以某种方式覆盖了默认对象中的选项。我已经尝试移动点击绑定但无法使其正常工作。

Answer 1

$ this，在最外面的闭包中声明并在整个过程中使用，表示FrumBox被实例化的最后一个元素。

就个人而言，我不会尝试修复代码。而是采用jQuery's "Best Practices" pattern。这是我的模板基于给出的示例：

(function($){
    // **********************************
    // ***** Start: Private Members *****
    var pluginName = 'xxxxx';
    // ***** Fin: Private Members *****
    // ********************************

    // *********************************
    // ***** Start: Public Methods *****
    var methods = {
        init : function(options) {
            //"this" is a jquery object on which this plugin has been invoked.
            return this.each(function(index){
                var $this = $(this);
                var data = $this.data(pluginName);
                // If the plugin hasn't been initialized yet
                if (!data){
                    var settings = {
                    };
                    if(options) { $.extend(true, settings, options); }

                    $this.data(pluginName, {
                        target : $this,
                        settings: settings
                    });
                }
            });
        },
        myMethod_1 : function(){.....},
        myMethod_2 : function(){.....}
    };
    // ***** Fin: Public Methods *****
    // *******************************

    // *****************************
    // ***** Start: Supervisor *****
    $.fn[pluginName] = 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 in jQuery.' + pluginName );
        }
    };
    // ***** Fin: Supervisor *****
    // ***************************
})( jQuery );

注意：

根据需要添加更多私有成员和方法。
公共成员（方法）具有特权（他们可以访问私人成员）。
为了保持可链接性，请务必在每个方法中采用return this.each(function(index){...})模式，但返回特定值的方法除外。
可以说，使用这种模式（以及其他模式）开发最困难的方面是了解this在每种情况下所指的内容。保持你的智慧。
准备使用javascript Function.call()和Function.apply方法。确保你理解它们。
乍一看很难理解主管，但不一定如此改性。这是一段很酷的代码。
使用$(selector).pluginNmae()或$(selector).pluginNmae(options)在DOM元素上实例化插件，其中options是对象文字“地图”。
使用$(selector).pluginNmae('methodName', ...)
这种模式的一个例子可以在selected answer here中找到（包括小提琴的链接）。

jquery插件不适用于多个元素 - 覆盖选项

1 个答案: