如何将定义的函数传递给jQuery点击事件？

我有一个抽屉菜单，扩大BTN点击，我想实现的是关闭菜单，当用户点击sidenav身体类覆盖整个身体。如何将定义的函数传递给jQuery点击事件？

这是基础HTML和JS

<div class="offcanvas-body sidenav-body"> 
    <main id="main-content" role="main"> 
     <div class="container-fluid short-section-row"> 
      <div class="row"> 
       <div class="side-nav-btn navbar-btn js-side-nav-btn" aria-expanded="false" aria-label="Open Side Navigation" aria-controls="SecondaryMenu">Explore This Section <span class="svg-sprite -hamburger"><svg role="img" aria-label="[object Object]"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hamburger"></use></svg></span></div> 
       <nav class="side-nav col-sm-2" role="Secondary navigation" aria-label="Side Navigation" aria-hidden="true" id="SecondaryMenu"> 
        <div class="side-nav__control-bar"> 
         <button class="navbar-btn js-side-nav-btn btn btn-primary pull-right" aria-expanded="false" aria-label="Close Side Navigation" aria-controls="SecondaryMenu" tabindex="-1"><span class="svg-sprite -close"><svg role="img" aria-label="close secondary nav"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg></span> Menu</button> 
        </div> 
        // some ul and li items 
       </nav> 
      </div> 
     </div> 
    </main> 
</div>

如何定义的类

this.$body = $(el); 
this.$sideNavBody = $('.sidenav-body'); 
this.$sideNav = $('.side-nav'); 
this.$controls = $('.side-nav button'); 
this.$sideNavBtn = $('.js-side-nav-btn');

我有BTN点击切换功能

sideNavBodyToggleEvent(){ 
    // if the nav is open, run close event 
    if(this.$body.hasClass('side-is-open')) { 
     this.sideNavBodyCloseEvent(); 
    } else { 
     this.sideNavBodyOpenEvent(); 
     } 
    }

而那些有条件的功能定义像这样

sideNavBodyCloseEvent() { 
    this.$body.removeClass('side-is-open'); 
    // always clear the 'opened state' of any open menus 
    this.$sideNavSection.removeClass('side-is-open'); 
    $(this.$controls).attr('tabindex', '-1'); 
    $(this.$sideNav).attr('aria-hidden', 'true'); 
    $(this.$sideNavBtn).attr('aria-expanded', 'false'); 
    $(this.$sideNavSectionToggle).removeClass('side-is-open'); 
    // unbind the pushed body click event 
    this.$sideNavBody.off(); 
    } 

sideNavBodyOpenEvent() { 
     this.$body.addClass('side-is-open'); 
     $(this.$sideNav).attr('aria-hidden', 'false'); 
     $(this.$controls).removeAttr('tabindex'); 
     $(this.$sideNavBtn).attr('aria-expanded', 'true'); 
     // bind an event on the div containing the pushed body 
     // original code left by prev dev was this.$sideNavBody.offClick.bind(this) and doesnt work as I think its trying to run both functions at once (the menu doesnt even open); 
     //below I am just trying to test if the click event even makes it to this.$.sideNavBody which is the .sidenav-body class and the section I want users to be able to click to close 
     $(this.$sideNavBody).click(function(e){ 
      console.log(e); 
     }); 
    }

open函数的工作原理和抽屉菜单滑出，但我在试图关闭它如下

$(this.$sideNavBody).click(function(e){ 
      $(this.sideNavBodyCloseEvent()); 
      console.log(e); 
});

它返回该错误Uncaught TypeError: this.sideNavBodyCloseEvent is not a function每次被点击的.sidenav体/ $ sideNavBody

如何通过该元素的sideNavBodyCloseEvent（）函数单击？

当添加的代码位关闭菜单上.sidenav体菜单关闭点击，当它遇到来自jQuery的

if (!(eventHandle = elemData.handle)) { eventHandle = elemData.handle = function(e) { // Discard the second event of a jQuery.event.trigger() and // when an event is called after a page has unloaded return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ? jQuery.event.dispatch.apply(elem, arguments) : undefined; }; }

这个代码，我以前从未见过或任何建议，有这个问题的时候？

来源

2017-06-20 gwar9

为什么你不能只运行该函数，而不使用jQuery？ – Simon

这是行不通的吗？

$(this.$sideNavBody).click(function(e){ 
    $(this.sideNavBodyCloseEvent()); 
    console.log(e); 
}.bind(this));

内功能有其自身this对象，该对象不具有sideNavBodyCloseEvent方法。要在内部函数中使用外部函数的this对象，请使用bind。

通常情况下，你必须结合必要的事件处理程序的初始化函数：

init() { 
    this.$sideNavBtn.click(this.sideNavBodyOpenEvent.bind(this)); 
    this.$sideNavBody.click(this.sideNavBodyCloseEvent.bind(this)); 
}

来源

2017-06-20 14:24:25 PeterMader

嘿@PeterMader这看起来不错，但它恢复到原来的代码菜单不会打开它像sideNavBodyOpenEvent需要完成，但没有？ – gwar9

编辑：使用断点逐步通过调试器菜单扩展，但是当它碰到那一段代码时，它会自动关闭 – gwar9

因此'this.sideNavBodyCloseEvent（）'调用得太早？ – PeterMader

这样如何做一个不同的方式。我想我在那里的某个地方犯了一个错误，但是把这个元素作为参数传递是主要的改变。

$body = $(el); 
$sideNavBody = $('.sidenav-body'); 
$sideNav = $('.side-nav'); 
$controls = $('.side-nav button'); 
$sideNavBtn = $('.js-side-nav-btn'); 

$sideNavBody.click(function(e){ 
      sideNavBodyCloseEvent($(this)) 
      console.log(e); 
}); 

sideNavBodyCloseEvent (element) { 
    element.$body.removeClass('side-is-open'); 
    // always clear the 'opened state' of any open menus 
    element.$sideNavSection.removeClass('side-is-open'); 
    $controls.attr('tabindex', '-1'); 
    $sideNav.attr('aria-hidden', 'true'); 
    $sideNavBtn.attr('aria-expanded', 'false'); 
    $sideNavSectionToggle.removeClass('side-is-open'); 
    // unbind the pushed body click event 
    $sideNavBody.off(); 
    }

来源

2017-06-20 14:24:37

如何将定义的函数传递给jQuery点击事件？

回答

相关问题