如何從javascript函數

Question

var ssOffCanvas = function() { 
      var menuTrigger = $('#header-menu-trigger'), 
      nav    = $('#menu-nav-wrap'), 
      closeButton  = nav.find('.close-button'), 
      siteBody  = $('body'), 
      mainContents = $('section, footer'); 

     // open-close menu by clicking on the menu icon 
     menuTrigger.on('click', function(e){ 
      e.preventDefault(); 
      menuTrigger.toggleClass('is-clicked'); 
      siteBody.toggleClass('menu-is-open'); 
     }); 
    }; 

proj_request_menu.onclick = function() { 
    modal.style.display = "block"; 
}; 

什麼它最適合的方式來調用proj_request_menu功能ssOffCanvas對象menuTrigger調用對象的方法。我知道要在對象內部處理這個問題。 例如：menuTrigger.trigger('click'); 需要你的幫助...

Answer 1

Make menuTrigger global？

var menuTrigger=null; 
var ssOffCanvas = function() { 
     menuTrigger = $('#header-menu-trigger'), 
     nav    = $('#menu-nav-wrap'), 
     closeButton  = nav.find('.close-button'), 
     siteBody  = $('body'), 
     mainContents = $('section, footer'); 

    // open-close menu by clicking on the menu icon 
    menuTrigger.on('click', function(e){ 
     e.preventDefault(); 
     menuTrigger.toggleClass('is-clicked'); 
     siteBody.toggleClass('menu-is-open'); 
    }); 
}; 

proj_reququest_menu.onclick = function() { 
if(menuTrigger) menuTrigger.trigger("click"); 
}; 

Answer 2

首先你必須修改你的對象定義，以便你的變量可以從外部訪問。現在，當您使用var關鍵字（或const或let）在對象內創建變量時，它將其視爲只能在該對象內使用的私有屬性。所以，你必須使之成爲一個特權與關鍵字this（對象的特權屬性可以從外部訪問）是這樣的：

var ssOffCanvas = function(){ 
    this.menuTrigger = $('#header-menu-trigger'); 
    ... 
}; 

注意this關鍵字this.menuTrigger。

爲了獲取對象的屬性首先你必須初始化它：

let myCanvas = new ssOffCanvas(); 

然後你就能獲得屬性：

myCanvas.menuTrigger; // returns $('#header-menu-trigger') value 

這樣做與其他屬性。讓我知道它是否有效。

Answer 3

由於menuMenuTrigger不是從外部接近ssOffCanvas功能以最快的方式（最少的代碼更改）將其拉出當前的功能，像這樣：

// now menu Trigger is available on the global scope 
// and could be called from everywhere 
var menuTrigger = $('#header-menu-trigger'); 

var ssOffCanvas = function() { 
    var nav    = $('#menu-nav-wrap'), 
     closeButton  = nav.find('.close-button'), 
     siteBody  = $('body'), 
     mainContents = $('section, footer'); 

    // open-close menu by clicking on the menu icon 
    menuTrigger.on('click', function(e){ 
     e.preventDefault(); 
     menuTrigger.toggleClass('is-clicked'); 
     siteBody.toggleClass('menu-is-open'); 
    }); 
}; 

proj_request_menu.onclick = function() { 
    modal.style.display = "block"; 

    // now it is available here, too. 
    menuTrigger.trigger('click') 
}; 

我不太清楚，如果這是你打算什麼...

Answer 4

因爲沒有鍛鍊將代碼添加到對象中。

$('#proj_request_menu').on('click',function(){ 
      menuTrigger.trigger('click'); 
      }); 

最終代碼如下：

var ssOffCanvas = function() { 

      var menuTrigger = $('#header-menu-trigger'), 
      nav    = $('#menu-nav-wrap'), 
      closeButton  = nav.find('.close-button'), 
      siteBody  = $('body'), 
      mainContents = $('section, footer'); 


     // open-close menu by clicking on the menu icon 
     menuTrigger.on('click', function(e){ 
      e.preventDefault(); 
      menuTrigger.toggleClass('is-clicked'); 
      siteBody.toggleClass('menu-is-open'); 
     }); 

     // close menu by clicking the close button 
     closeButton.on('click', function(e){ 
      e.preventDefault(); 
      menuTrigger.trigger('click'); 
     }); 

     // close menu clicking outside the menu itself 
     siteBody.on('click', function(e){  
      if(!$(e.target).is('#menu-nav-wrap, #header-menu-trigger, #header-menu-trigger span')) { 
       menuTrigger.removeClass('is-clicked'); 
       siteBody.removeClass('menu-is-open'); 
      } 
     }); 
     $('#proj_request_menu').on('click',function(){ 
      menuTrigger.trigger('click'); 
      }); 

    }; 
var proj_request_menu= document.getElementById("proj_request_menu"); 
proj_request_menu.onclick = function() { 
    modal.style.display = "block"; 
};