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

【问题标题】：jQuery $(this) selector is not working within a functionjQuery $(this) 选择器在函数中不起作用
【发布时间】：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 作为参数时才提供元素访问权限

标签： javascript jquery jquery-selectors 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 的基础知识

【讨论】：

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