Question

如何访问插件中的某个链接函数？

这是我的插件，我需要在文档中返回一个附加元素。

(function($){

        $.fn.extend({ 

            selection: function(options) {

                var defaults = {
                    element:     "selection"
                }

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

                var $this = this;


               $this.function_1 = function(object)
                {
                    alert('function 1');

                }

                $this.function_2 = function(object)
                {
                    alert('function 2');
                }

                $(document.body).append("<div class='element'>Loading</div>");

                var element = $('.element');

                return element;

            }
        });

    })(jQuery);

单击按钮时应该警告“功能2”，但它会在firefox上返回错误。

以下是我的jsffiddle，

http://jsfiddle.net/dm3ft/

Answer 1

一种方法是向插件函数添加一个参数，以将方法作为字符串传递。基础知识来自jQuery plugin authoring docs：

(function($) {

    var methods = {
        function_1: function(object) {
            alert('function 1');
        },
        function_2: function(object) {
            alert('function 2');
        }
    };


$.fn.selection = function(method, options) {

    return this.each(function(){

        $(this).click(function() {

              // Method calling logic
               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 on jQuery.tooltip');
               }
          });
    });

})(jQuery);

然后调用插件方法：

  $('.chain-function').selection('function_2'/* optional options object*/);

DEMO：http://jsfiddle.net/dm3ft/1/

注意：您必须意识到插件函数中的this是DOM元素，而不是将其与this作为您的类的一部分混淆

Answer 2

您也可以使用 jQuery.fn

$(document).ready(function(){

   $('.chain-function').function_2();

});

(function($){

    $.fn.function_2 = function(object){

        alert("yay!");
        var element = $("<div />").addClass("element").text("Loading");
        element.appendTo(  $(document.body) );
        return element;

    };

})(jQuery);

如何访问插件中的链接函数之一？

2 个答案: