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

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', ...) 调用已初始化的 DOM 元素上的方法
• 可以在selected answer here 中找到这种模式的一个示例（包括指向小提琴的链接）。