如何将定义的函数传递给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; }; }
这个代码,我以前从未见过或任何建议,有这个问题的时候?
这是行不通的吗?
$(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));
}
嘿@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();
}
为什么你不能只运行该函数,而不使用jQuery? – Simon