Question

以下似乎不起作用 -

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();

 }

};

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

selectors.div返回一个空数组。请记住，对于每个命名空间，我希望将第一个项目作为选择器存储器，我可以使用来自任何其他对象的IT.TopSlide.selectors进行访问。在命名空间内，我想将其定义为var - var selectors = IT.TopSlide.selectors;，以便我可以访问缓存选择器。

Answer 1

您希望确保将其置于DOM准备就绪后运行的函数

$(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();

});

否则它会在创建对象之前尝试添加它们。

Answer 2

看起来你的selectors对象是在DOM没有准备好的时候定义的。当您在对象中编写$("selector")时，会立即调用jQuery函数，并返回一个包含它找到的任何内容的数组。

我认为您应该做以下两件事之一：更改您的选择器数组以仅包含选择器，如下所示：

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对象中，只要需要获取匹配的dom元素的当前列表，就可以调用它们：

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();

无论哪种方式都可行，并且会延迟实际调用jQuery直到正确的位置 - 当你真正想要匹配DOM中的内容时。

更新

如果您需要在首次加载文档时缓存这些函数，那么您需要在$（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();
    ...
}

这样，你就可以在文档加载和准备好的时候缓存一个版本，并且你可以灵活地在任何其他点调用cacheSelectors（）（比如，在你知道DOM已经存在之后）如果需要，可以使用新副本。

Answer 3

另一个答案是init函数可以进行选择器的实际设置！这样你仍然可以缓存选择器，但是在DOM准备好之前代码不会运行。

Answer 4

两个选项：

在关闭正文标记之前，将代码放在页面底部。
将选择器对象转换为函数并在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();
});

Answer 5

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();
});

我必须定义一个在init上填充的空选择器对象。然后我必须将“选择器”声明为一个变量，除非我想每次想要那个div时都做IT.TopSlide.selectors.div（对我来说太长了）。感谢。

在对象中存储jquery选择器

5 个答案:

更新