将jquery选择器存储在对象中

$(document).ready(function(){
    IT.TopSlide = {

    selectors : {
        div : $('#top-slide'),
        signup : $('#top-slide #signup'),
        login : $('#top-slide #login'),
        signup_trigger : $('#header .top-slide-triggers a.signup-trigger'),
        login_trigger : $('#header .top-slide-triggers a.login-trigger'),
        close : $('a.close')
     },

     init : function (){

     var selectors = IT.TopSlide.selectors;
     selectors.div.hide();
     selectors.login.hide();

       }

    };


    IT.TopSlide.init();

});

它看起来像你的 selectors $("selector")

selectors : {
    div : '#top-slide',
    signup : '#top-slide #signup',
    login : '#top-slide #login',
    signup_trigger : '#header .top-slide-triggers a.signup-trigger',
    login_trigger : '#header .top-slide-triggers a.login-trigger',
    close : 'a.close'
},

然后,当你想使用它时,在那一点上调用jQuery:

var selectors = IT.TopSlide.selectors;
$(selectors.div).hide();

或者,

selectors : {
    div : function() { return $('#top-slide') },
    signup : function() { return $('#top-slide #signup') },
    login : function() { return $('#top-slide #login') },
    signup_trigger : function() { return $('#header .top-slide-triggers a.signup-trigger') },
    login_trigger : function() { return $('#header .top-slide-triggers a.login-trigger') },
    close : function() { return $('a.close') }
},

然后,要使用它,请执行以下操作:

var selectors = IT.TopSlide.selectors;
selectors.div().hide();

如果你需要在文档首次加载时缓存这些函数,那么你需要在$(document).ready()回调中调用jQuery函数。你可以通过一个调用jQuery并缓存所有结果的函数将代码保存在你的命名空间中,如下所示:

IT.TopSlide = {

    ...

    cacheSelectors: function() {
        return {
            div : $('#top-slide'),
            signup : $('#top-slide #signup'),
            login : $('#top-slide #login'),
            signup_trigger : $('#header .top-slide-triggers a.signup-trigger'),
            login_trigger : $('#header .top-slide-triggers a.login-trigger'),
            close : $('a.close')
        }
    },

    ...
}

$(document).ready(function() {
    ...
    IT.TopSlide.selectors = IT.TopSlide.cacheSelectors();
    ...
}

另一个答案是init函数可以完成选择器的实际设置!这样,您仍然可以缓存选择器,但在DOM准备就绪之前,代码不会运行。

两种选择:

1. 在关闭body标记之前,将代码放在页面底部。
2. 将选择器对象转换为函数,并在DOM就绪时调用它。如果你想在运行init()之前缓存它,你可以在调用init()前在'ready'事件函数中执行:

-

IT.TopSlide = {
    cacheSelectors : function() {
        IT.TopSlide.selectors = {
            div : $('#top-slide'),
            signup : $('#top-slide #signup'),
            login : $('#top-slide #login'),
            signup_trigger : $('#header .top-slide-triggers a.signup-trigger'),
            login_trigger : $('#header .top-slide-triggers a.login-trigger'),
            close : $('a.close')
        }
    },
    selectors : {},
    init : function () {
        var selectors = IT.TopSlide.selectors;
        selectors.div.hide();
        selectors.login.hide();
    }
};

$(function() {
    IT.TopSlide.cacheSelectors();
    IT.TopSlide.init();
});

IT.TopSlide = {    
    selectors : {},

    init : function (){    
        IT.TopSlide.selectors =  {
            div : $('#top-slide'),
            signup : $('#top-slide #signup'),
        };
    },

    another_method : function() {    
        selectors = IT.TopSlide.selectors;    
        var height = selectors.div.height();
    }
};

$(document).ready(function () {
    IT.TopSlide.init();
});

IT.TopSlide.selectors.div