函数在js原型中不起作用

时间:2015-05-27 16:45:25

标签: javascript jquery html

我开发了一个带有原型继承的jQuery插件。但是这些函数只适用于主init()函数,其他原型不起作用。

我的主要功能是

function Mynav(){
  ....
}

Mynav.prototype.linkBehaviour = function(){
     $('.nav-menu li a').on('click', function(e) {
         if ($(this).attr('href') !== '#') {
            var link = $(this).attr('href');
            $('#preloader').removeClass('fadeOut').addClass('fadeIn').fadeIn('slow');
            setTimeout(function() {
                 window.location = link;
            }, 1500)
         } else if ($(this).attr('href') == '#') {
              e.preventDefault();
         }
    });
}

Mynav.prototype.verticalConverter = function(){
     if (verticalNavOn) {

       if(!verticalLive){
          menuConverter();
          verticalLive = true;
        }

     }
     $(window).on('load resize', function(){
         width = $(window).width();
         if(width < 959){
            if(!verticalLive){
               menuConverter();   //This is a function also available with Mynav.prototype.menuConverter
               header.removeAttr('style');
               verticalLive = true;
            }
         } else{
             convertHorizontal();  // Its also a function available
             $('.header-fixed').attr('style',headerAttr);
              verticalLive = false;
         }
      });
}


function init(){
   new Mynav();
}

init();

如果我将linkBehaviour函数放在主verticalconverter中,则代码linkBehaviourMynav()无法正常工作,但它不起作用。 而且我实际上并不知道load/resize是否与原型有关。 可以任何人帮助关于以上两个功能吗?

1 个答案:

答案 0 :(得分:1)

function Mynav(){

  this.verticalNavOn = false;

}

Mynav.prototype.linkBehaviour = function(){
     $('.nav-menu li a').on('click', function(e) {
         if ($(this).attr('href') !== '#') {
            var link = $(this).attr('href');
            $('#preloader').removeClass('fadeOut').addClass('fadeIn').fadeIn('slow');
            setTimeout(function() {
                 window.location = link;
            }, 1500)
         } else if ($(this).attr('href') == '#') {
              e.preventDefault();
         }
    });
}

/* --------------------------------------------------------------------------------------------------------
*   I believe that is in trouble when the RESIZE happens.
*
*   To make the BIND (on), you must pass the own plugin AHEAD. To be used in the event when it happens.
* --------------------------------------------------------------------------------------------------------
*/
Mynav.prototype.verticalConverter = function(){
    var self = this;

     if (self.verticalNavOn) {
       if(!self.verticalLive){
          self.menuConverter();
          self.verticalLive = true;
        }
     }

     // parse THIS plugin for EVENT
     $(window).on('load resize', {self: self}, function(e){

         // get SELF PLUGIN
         var self = e.data['self'];

         width = $(window).width();
         if(width < 959){
            if(!self.verticalLive){
               self.menuConverter();   //This is a function also available with Mynav.prototype.menuConverter
               header.removeAttr('style');
               self.verticalLive = true;
            }
         } else{
             self.convertHorizontal();  // Its also a function available
             $('.header-fixed').attr('style',headerAttr);
              self.verticalLive = false;
         }
      });
}


function init(){
   var x = new Mynav();

   // focing start function for tests
   x.verticalConverter();
}

init();

http://jsbin.com/ricaluredi/3

中查看HTML和JS的完整更改