如何將定義的函數傳遞給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點擊事件？

回答

相關問題