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

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 插件创作文档：

(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*/);

演示：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);​