Mein OOP funktioniert nicht mit meinem Menü

Ich habe versucht, das Menü in OOP Javascript zu machen, um wiederholbaren Code zu verhindern. Ich habe zwei Menüelemente "toggleBtn" für Desktop Burger Icon und "toggleBtnMobile" für Mobile Bruger Icon.Mein OOP funktioniert nicht mit meinem Menü

Das Problem gerade jetzt: Es funktioniert nicht.

var $this = $(this), 
     $navSidebar = $('#navSidebar'), 
     $navDlrz = $('#navDlrz'), 
     $toggleBtn = $('#toggleBtn'), 
     $toggleBtnMobile = $('#toggleBtnMobile'), 
     $menuHasChildren = $('.menu-item-has-children'), 
     $subMenu = $menuHasChildren.find('ul.sub-menu'); 

    // Menu class 
    function Menu(menu) { 

      this.menu = menu; 
      var one = menu.children().eq(1); // Burger Icons top bar 
      var two = menu.children().eq(2); // Burger Icons middle bar 
      var three = menu.children().eq(3); // Burger Icons bottom bar 

     } 


// When the Nav is clicked, the burger Icon transforms into "X" 
    Menu.prototype.openNav = function() { 

     one.addClass('One'); 
     two.addClass('Two'); 
     three.addClass('Three'); 
     $navSidebar.css('left', '0px'); 
     $navDlrz.css('left', '200px'); 

    }; 



// Back to standard Icon 
    Menu.prototype.closeNav = function() { 

     one.removeClass('One'); 
     two.removeClass('Two'); 
     three.removeClass('Three'); 
     $navSidebar.css('left', '-200px'); 
     $navDlrz.css('left', '0px'); 

    } 

Menu.prototype.toggleNav = function() { 

     menu.click(function() { 

      var $this = $(this), 
       $className = $this.attr('class'); 

      switch($className) { 
       case 'navbar-toggle': 
        $this.addClass('open'); 
        this.openNav(); 
        break; 
       case 'navbar-toggle open': 
        $this.removeClass('open'); 
        $menuHasChildren.removeClass('open'); 
        $menuHasChildren.find('ul.sub-menu').removeClass('open'); 
        this.closeNav(); 
        break; 
      } 

     }); 

    }

Important notice: I don't need any framework regarding menu toggeling. I'm learning at the moment.

Quelle

2017-01-17 Banovi Partner GmbH

Ihr Problem ist Schließung

function Menu(menu) { 

      this.menu = menu; 
      var one = menu.children().eq(1); // Burger Icons top bar 
      var two = menu.children().eq(2); // Burger Icons middle bar 
      var three = menu.children().eq(3); // Burger Icons bottom bar 

     }

hier erklärt Ihnen eins, zwei und drei Variablen mit var Schlüssel. Diese Variablen können nur im Menü-Konstruktor angezeigt werden, sie mit 'diesem' Schlüsselwort deklarieren und sie mit 'diesem' verwenden

Quelle

2017-01-17 08:05:50 Bakshi

Es hat nicht geholfen. Es besagt, dass this.openNav() oder this.closeNav() keine Funktion ist. –

Sie haben Ihre Variablen im Menükonstruktor deklariert und sie als Objektschlüssel in der Methode Menu.prototype.openNav verwendet. Beispiel: "Funktionsmenü() { var one = menu.children(). eq (1); // muss sein: this.one = menu.children(). eq (1); } Menü. prototype.openNav = function() { one.removeClass ('One'); } " man kann die Variable nicht mit 'var' deklarieren und sie aus dem Konstruktor verwenden – Bakshi

Es hat nicht geholfen, wie ich schon sagte .. .Ich verwendete sie mit diesem Schlüsselwort aber hier ist die Ausgabe in der Konsole: VM2348: 58 Uncaught TypeError: this.closeNav ist keine Funktion bei HTMLButtonElement. (: 58: 26) und VM2348: 58 Uncaught Typeerror: this.openNav ist keine Funktion bei HTMLButtonElement. (: 58: 26) –

Mein OOP funktioniert nicht mit meinem Menü

Antwort

Verwandte Themen