Question

我创建了以下插件。当我尝试初始化它两次时它不起作用。在演示中，如果您打开浏览器控制台，open链接没有响应。而是菜单链接两次调用secondFunc函数。我不明白我在哪里犯了错误。

HTML

 <div class="home">
       <div class="open-door-c">
           <a href="#" class="open-door">open</a>
        </div>
        <div class="container"> 
            <div class="info" >
                <div class="nav">
                    <ul class="menu">
                        <li><a href="#" class="link">1</a></li>
                        <li><a href="#" class="link">2</a></li>
                        <li><a href="#" class="link">3</a></li>
                        <li><a href="#" class="link">4</a></li>
                        <li><a href="#" class="link">5</a></li>
                    </ul>
                </div>
                <div class="more-details-container">
                    <div>
                        <h1>title</h1>
                    </div>
                    <div class="sec">
                        1
                    </div>
                    <div class="sec">
                        2
                    </div>
                    <div class="sec">
                        3
                    </div>
                    <div class="sec">
                        4
                    </div>
                    <div class="sec">
                        5
                    </div>
                </div>
            </div>
        </div>
    </div>

插件

 (function ($, window, document, undefind) { 
   var MyPlugin = {    
    init : function (options, element) { 
        $.extend({}, $.fn.myPlugin.options, options);            
        $.fn.myPlugin.options.linkClass.on('click', this.secondFunc);
    },

    secondFunc : function () {
        alert(this);
    }

}; 

$.fn.myPlugin = function (options) {  
    return this.each(function (options) {
        var rezG = Object.create(MyPlugin);
        rezG.init(options, this);
    });        
};

$.fn.myPlugin.options = {
    linkClass: $('.link')       
};

})(jQuery, window, document);

$('.more-details-container').myPlugin({
            linkClass: $('.link')
        });
        $('.home').myPlugin({
            linkClass: $('.open-door')
        });

jsfiddle demo

Answer 1

有两种可能的错误：

$.extend({}, $.fn.myPlugin.options, options);只会返回一个包含$ .fn.myPlugin.options和options属性的新对象，但它不会更新你的$ .fn.myPlugin.options对象。＃39;重新使用以下内容：

$。fn.myPlugin.options.linkClass.on（＆＃39;点击＆＃39;，this.secondFunc）;

要保留原始对象并将扩展对象分配给$ .fn.myPlugin.options，请尝试以下方法：

$.fn.myPlugin.options = $.extend({}, $.fn.myPlugin.options, options); // read more on [jQuery extend](// http://api.jquery.com/jquery.extend/)

我认为没有必要使用下面的每个迭代：

$.fn.myPlugin = function(options) { return this.each(function(options) { var rezG = Object.create(MyPlugin); rezG.init(options, this); }); };

当您使用init()实例化新插件时，

element.myPlugin(...);将被调用，这将使用指定的参数options创建新的插件引用。

查看此更新后的jsfiddle，看看您是否正在寻找。

如何允许用户创建jQuery插件的两个实例

1 个答案: