javascript - 调用 jQuery 插件的多个实例

Question

我有一个简单的 jQuery 插件，我希望能够在单个页面上调用多个元素。

到目前为止，我显式声明了选择器，但我希望它们与调用插件的对象相关。我怎样才能做到这一点？

(function($) {

    var MyPlugin = function(options){

        var plugin      = $(this); // The entire myPlugin object
        var element     = $("div#plugined div#element"); // An element in myPlugin
        var pluginChild = $( ); // Need selector of what plugin was called on + additional slider. ("div#plugined div#child")

        this.publicFunction = function() {
            // something...
        }

        var privateFunction = function() {
            // something private...
        }
    };

    $.fn.myPlugin = function(options) {

        var defaults = {
            // options
        }

        var options = $.extend(defaults, options);

        var myPlugin = new MyPlugin(options);

        $("div#plugined a.arrow").bind('click', function(e){ // Same problem. Need selector of what plugin was called on + additional slider. ("div#plugined div#child")
            e.preventDefault();
            myPlugin.publicFunction();
        });

        return myPlugin;
    };
})(jQuery);


<script type="text/javascript">
    $(window).load(function() {
        $('div#plugined').myPlugin();
    });
</script>

Answer 1

您必须传递当前的 jQuery 集:

var myPlugin = new MyPlugin(this, options);

在myPlugin内，执行如下操作:

var MyPlugin = function($set, options){
    // ...
    var pluginChild = $set.find(".child");

请注意，代码中的 this 引用的是 MyPlugin 实例，因此调用 $(this) 没有多大意义.