Question

我通常以不同的风格编写代码，这是一种更基本的风格。所以我正在尝试一种新的做事方式，但我似乎无法得到它。

我的console.log返回一个jQuery对象： console.log（accountMenu.child）;

但是这会返回undefined： console.log（accountMenu.child.css（'top'））; 。和其他jQuery方法是一样的。我做错了什么？

var accountMenu = {
accountButton: jQuery('.my-account-btn'),
child: jQuery('#my-account-droplist'),
container: jQuery('.my-account-droplist-container'),

closeAccount: function() { 
    accountButton.removeClass('expanded');
    child.animate({
        "top": child.outerHeight() * -1
    }, 650);
},

openAccount: function(){
    accountButton.addClass('expanded');
    child.animate({
        "top": 0
    }, 650);
    this.setTimeout(function(){closeAccount()}, 6000);
}};

jQuery(document).ready(function(){

accountMenu.child.css({"top": accountMenu.child.outerHeight() * -1});

console.log(accountMenu.child);

//animate account drop down
accountMenu.accountButton.click(function() {
    //check if open or closed
    if ( accountMenu.accountButton.hasClass('expanded') ){
        accountMenu.accountMenu.closeAccount();
    } else{
        //first close mycart
        if ( jQuery('.top-cart > div').hasClass('expanded') ){
            Enterprise.TopCart.hideCart();
            setTimeout(function(){
                accountMenu.accountMenu.openAccount();
            }, 700);
        }else {
            accountMenu.accountMenu.openAccount();
        };
    };
});
});

Answer 1

您知道jQuery(document).ready()并且您已经使用过它。但是，在页面加载完成之前，您将从该块外部的页面获取数据。

修改：如果您询问如何将accountMenu设为全局，则必须在适当的范围内使用var关键字进行声明：

var accountMenu;

jQuery(document).ready(function(){
    accountMenu = {
        accountButton: jQuery('.my-account-btn'),
        ...
    };
});

Answer 2

“我的console.log返回一个jQuery对象：console.log(accountMenu.child);”

那是因为$("any selector")总是返回一个jQuery对象，但如果没有匹配的元素，jQuery对象将为空，然后.css()将返回undefined。

任何试图访问/操作DOM元素的JS代码都需要在浏览器解析了相关元素之后运行，这意味着您应该将var accountMenu = { ...声明移动到文档就绪处理程序中或移动脚本元素到正文的末尾（就在</body>标记之前 - 在这种情况下你根本不需要就绪处理程序。）

Answer 3

在Document.ready中获取变量accountMenu是错误的。我认为你需要这样做

jQuery(document).ready(function(){

var accountMenu = {
accountButton: jQuery('.my-account-btn'),
child: jQuery('#my-account-droplist'),
container: jQuery('.my-account-droplist-container'),

closeAccount: function() { 
    accountButton.removeClass('expanded');
    child.animate({
        "top": child.outerHeight() * -1
    }, 650);
},

openAccount: function(){
    accountButton.addClass('expanded');
    child.animate({
        "top": 0
    }, 650);
    this.setTimeout(function(){closeAccount()}, 6000);
}};

accountMenu.child.css({"top": accountMenu.child.outerHeight() * -1});

console.log(accountMenu.child);

//animate account drop down
accountMenu.accountButton.click(function() {
    //check if open or closed
    if ( accountMenu.accountButton.hasClass('expanded') ){
        accountMenu.accountMenu.closeAccount();
    } else{
        //first close mycart
        if ( jQuery('.top-cart > div').hasClass('expanded') ){
            Enterprise.TopCart.hideCart();
            setTimeout(function(){
                accountMenu.accountMenu.openAccount();
            }, 700);
        }else {
            accountMenu.accountMenu.openAccount();
        };
    };
});
});

jQuery函数返回undefined

3 个答案: