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

您必须修改对象定义，以便可以从外部访问您的变量。现在，当您使用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 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";
};

Answer 4

将menuTrigger设为全局？

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");
};

如何从javascript函数调用object方法

4 个答案: