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 事件处理程序,而不是使用 onClick
和 html 中的内联函数。
例如,如果您将其放置在您的$(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 对话框模式中不起作用?