Question

所以我一直试图通过在$(document).ready()上实现一个对象文字来组织我的jQuery代码（目前在#Menu中包含所有内容）。但现在，过去工作的事件代表团已经不再工作了。

HTML 的

<div id="Menu">
<header id="Menu-Header">
    <button id="Menu-Button" type="button" class="btn btn-default btn-lg button-menu" aria-label="Menu"> 
        <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
        <h1>Problems</h1> 
    </button>
</header>
...
</div>

的jQuery

$(document).ready(function () {
    menu.init();
    ...
});

var menu = {
    $menu: $('#Menu'), $menuButton: $('#Menu-Button'), 
    init: function () {
        this.$menuButton.on('mouseenter', function () {
            this.$menuButton.children('.glyphicon-menu-hamburger').hide();
            this.$menuButton.children('h1').fadeIn(200);
        });
        this.$menuButton.on('mouseleave', function () {
            this.$menuButton.children('h1').hide();
            this.$menuButton.children('.glyphicon-menu-hamburger').fadeIn(200);
            console.log("is this even working");
        });
        console.log("menu init being called");
    }
};

在打印menu init being called时，其他打印语句没有显示，我觉得这表明.on()未正确初始化。

我觉得我可能会选择拼写错误，但我似乎无法弄明白。

如果有人能帮助我，我将不胜感激！

JSFiddle

Answer 1

回调中的

this并不指向menu。它指向触发事件的DOM节点。

如果您希望在对象的上下文中执行回调，则应使用$.proxy：

...on('mouseenter', $.proxy(function () {
  ...code...
}, this));

此外，如果在之前执行$('#Menu')或任何其他jQuery选择器，则页面上存在DOM节点，它们返回的对象将为空集合。

在DOM准备好后初始化您的数据，或者只是在回调中查询DOM。

Answer 2

问题在于：

<form name='$ctrl.myForm'>

在文档准备好之前查询菜单和菜单按钮时。如果您想以最初展示的方式使用它，我的报价为$menu: $('#Menu'), $menuButton: $('#Menu-Button'),：

Dynamic Objects

动态属性是一种在尝试获取值时评估值的属性。这意味着查询菜单标签不会调用，直到您获得var menu = { get $menu(){ return $('#Menu'); }, get $menuButton(){ return $('#Menu-Button')}, }的值：

$menu

另外要提到的是事件函数中的console.log(menu.$menu);与菜单对象上的this不同。要访问其中的菜单项，您只需使用menu变量，或者如果您认为该名称可能会更改，则可以将其分配给init函数内的局部变量，然后将其用作菜单值。

为什么在使用object literal组织后jQuery代码不起作用？

2 个答案: