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)没有多大意义。

Answer 2

在http://docs.jquery.com/Plugins/Authoring上，您可以找到一些描述如何执行此操作的基本代码。

看一下这个例子：

(function( $ ){

  $.fn.tooltip = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    return this.each(function() {        

      // Tooltip plugin code here

      $(this) // Will return the selected element

    });

  };
})( jQuery );

在this.each循环中，您可以在$（this）上运行代码，这将为您提供每个选定的元素。

调用jQuery插件的多个实例

2 个答案: