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

Posted

技术标签:

【中文标题】jQuery $(this) 选择器在函数中不起作用【英文标题】:jQuery $(this) selector is not working within a function 【发布时间】:2016-02-01 01:30:58 【问题描述】:

我正在尝试创建一个函数,该函数将通过程序添加的 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');
;

这是一个链接 Codepen Project

任何帮助将不胜感激!

【问题讨论】:

用一个变量改变$(this),并使用该变量作为函数的参数。 摆脱 onclick 并使用 jQuery 事件处理程序。使用突兀的脚本和不突兀的结合是没有意义的。 onclick 仅在您传入 this 作为参数时才提供元素访问权限 【参考方案1】:

正确的做法是使用 jQuery 事件处理程序,而不是使用 onClickhtml 中的内联函数。

例如,如果您将其放置在您的$(document).ready() 中,它将附加一个点击事件处理程序到您顶部菜单中的所有A 元素。单击它时,您将能够获取$(this)(即A元素)然后遍历其父元素(UL元素),然后找到子UL元素(子菜单)到切换类。

$('#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

【讨论】:

【参考方案2】:
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))

【讨论】:

【参考方案3】:

对于 $(this),您必须先选择一个元素。在一个函数中你没有那样的..所以它只有在你直接选择它而不是用 $(this) 时才会起作用

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

阅读 this 了解更多关于 jQuerys 的基础知识

【讨论】:

答案没有任何意义 我的英语很差^^如果你能理解我的意思,那将是有道理的...... 尝试使用翻译服务。

以上是关于jQuery $(this) 选择器在函数中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的 jQuery :not() 选择器在 CSS 中不起作用?

为啥我的 jQuery :not() 选择器在 CSS 中不起作用?

为啥 jQuery UI 日期选择器在 jQuery 对话框模式中不起作用?

jQuery 属性选择器在 Internet Explorer 中不起作用

jQuery *= 选择器在 IE8 中不起作用

jquery 1.8 类选择器在 Firefox 中不起作用