jQuery $(this) 选择器在函数中不起作用

Question

我正在尝试制作一个函数，该函数将通过程序添加的 div.hb-menu-subMenuToggle 元素的 'onclick' 事件触发。当将初始选择器用作除 '$(this)'

以外的任何内容时，该函数有效

// FUNCTION: hbMenuSubToggle()
// Toggles CSS classes for animation of .hb-menu-sub-open. Fires when clicking the div element with .hb-menu-subMenuToggle class 
function hbMenuSubToggle(){

    // TESTING: This works as far as opening the submenus; however, it does not open only the submenu that is a direct sibling of the hb-menu-subMenuToggle element.
    $('a.withSubmenu').siblings('ul').toggleClass('hb-menu-sub-open');

    // DESIRED EFFECT: Does not work
    $(this).siblings('ul').toggleClass('hb-menu-sub-open');
};

这是 link Codepen Project

如有任何帮助，我们将不胜感激！

Answer 1

function hbMenuSubToggle(divyouneed){

// TESTING: This works as far as opening the submenus; however, it does not open only the submenu that is a direct sibling of the hb-menu-subMenuToggle element.
$('a.withSubmenu').siblings('ul').toggleClass('hb-menu-sub-open');

// DESIRED EFFECT: Does not work
divyouneed.siblings('ul').toggleClass('hb-menu-sub-open');
};

并使用它

hbMenuSubToggle($(this))

Answer 2

对于 $(this) 你必须先 selected 一个元素。在一个函数中你没有那样的..所以它只有在你 select 直接而不是 $(this)

时才有效

function hbMenuSubToggle() {
  $('.blablabla').blablabla();
}

并阅读 this 以了解有关 jQuery 基础知识的更多信息

Answer 3

执行此操作的正确方法是使用 jQuery 事件处理程序，而不是使用 onClick 和 HTML 中的内联函数。

例如，如果您将它放在 $(document).ready() 中，它会将点击事件处理程序附加到顶部菜单中的所有 A 元素。当它被点击时你将能够得到$(this)（也就是A元素）然后遍历到它的父元素（UL元素）然后找到子UL 元素（子菜单）切换 class.

$('#main-nav>ul>li').on('click', '>a', function(){
    $(this).parent().find('ul').toggleClass('hb-menu-sub-open');
});

同样你显示主菜单的函数也可以这样写

$(document).on('click', '.hb-menu-btn', function(){
    $('.hb-menu-btn, .hb-menu, .hb-menu-page').toggleClass('hb-menu-open');
});

在此处查看它在 CodePen 上的运行情况：http://codepen.io/anon/pen/rOKQOJ

jQuery $(this) 选择器在函数中不起作用

jQuery $(this) selector is not working within a function

javascript

jquery

this

jquery-selectors