jquery - 在 jquery 插件中调用多个函数

Question

我喜欢在插件中调用多个函数，但由于某些原因，我得到了方法 undefined。

如果我不使用方法来包装我得到的函数

函数语句需要一个名称

1. 我在这里做错了什么？

2. 我需要用方法var包装函数吗？

   (function ($) {
   
   var methods = {
   
       // GET TARGET LOCATION AND ANIMATE
       scrollTopPage: function () {
   
           $(htmlBody).animate({
               scrollTop: 0
           }, 'slow');
   
       },
   
       scrollToSect: function (htmlBody) {
   
           $(htmlBody).animate({
   
               scrollTop: $('#page-id').offset().top
           });
   
       },
   
       goToID: function (sectID) {
   
           var htmlBody = 'html,body';
   
           //Scroll to the very top
           if (sectID == 'home') {
   
               methods.scrollTopPage(htmlBody);
   
           } else {
   
   
               methods.scrollToSect(htmlBody);
   
           }
   
       }
   
   } // End the Methods/Functions
   
   
   $.fn.pageScroller = function (methods) {
   
   
       this.click(function (e) {
   
           sectID = $(this).attr('id');
   
               e.preventDefault();
   
               // Undefined Error
               methods.goToID(sectID); // Call the goToID function and pass the sectID variable
   
                   $(this).parent().addClass('current').prev().removeClass('current');
                   $(this).parent().addClass('current').next().removeClass('current');
   
   
       });
   
       $(document).keydown(function (e) {
   
           //To Do Re Use the methods/functions here
   
       });
   
   };
   
   })(jQuery);
   

Answer 1

您正在分配一个变量，而不是在以下位置调用函数：

 $.fn.pageScroller = function (methods) { ....

我猜这会导致当函数实际从$.fn.pageScrollerplugin或任何调用函数时，参数将被命名methods，但不会是您创建的方法对象。相反，它将是调用者选择作为参数传递的任何内容。在您的情况下，似乎根本没有传递任何参数。methods这就是为什么undefined。

如果你不为这个函数设置参数，是不是会导致methods引用你的函数集合而不是传递的参数？

即：试试这个，希望methods仍然可以访问：

 $.fn.pageScroller = function () { ....

Answer 2

另一种方法是methods在插件内部拥有这样的属性......

(function ($) {

$.fn.pageScroller = function () {

  this.methods = {

    // GET TARGET LOCATION AND ANIMATE
    scrollTopPage: function () {

        $(htmlBody).animate({
            scrollTop: 0
        }, 'slow');

    },

    scrollToSect: function (htmlBody) {

        $(htmlBody).animate({

            scrollTop: $('#page-id').offset().top
        });

    },

    goToID: function (sectID) {

        var htmlBody = 'html,body';

        //Scroll to the very top
        if (sectID == 'home') {

            methods.scrollTopPage(htmlBody);

        } else {


            methods.scrollToSect(htmlBody);

        }

    }

} // End the Methods/Functions



    this.click(function (e) {

        sectID = $(this).attr('id');

            e.preventDefault();

            // Undefined Error
            methods.goToID(sectID); // Call the goToID function and pass the sectID variable

                $(this).parent().addClass('current').prev().removeClass('current');
                $(this).parent().addClass('current').next().removeClass('current');


    });

    $(document).keydown(function (e) {

        //To Do Re Use the methods/functions here

    });

};

})(jQuery);

或者您也可以在创建插件时传递方法...