如何从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 object menuTrigger最合适的方式是什么？我知道如何在对象中处理这个问题。例如：menuTrigger.trigger('click');需要你的帮助……

Answer 1

首先，你必须修改你的对象定义，这样你的变量才能从外部访问。现在，当您使用var关键字(或const或let)在对象内创建变量时，它被视为只能在该对象内使用的私有属性。因此，您必须使用关键字this (可以从外部访问对象的特权属性)将其设置为特权对象，如下所示：

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

注意this.menuTrigger中的this关键字。

要首先获取对象的属性，您必须实例化它：

let myCanvas = new ssOffCanvas();

然后你就可以得到这个属性了：

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

对其他属性执行相同的操作。如果起作用了，请告诉我。

Answer 2

由于无法从ssOffCanvas函数外部访问menuMenuTrigger，因此最快的方法(只需更改最少的代码)就是将其从当前函数中取出，如下所示：

// 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 3

因为没有解决任何问题，所以在对象中添加了代码。

$('#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";
};