хранение селекторов jquery в объекте

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;, чтобы я мог получить доступ к селекторам cached .

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.

Обновление

Если вам нужно, чтобы эти функции кэшировались во время первой загрузки документа, тогда вам нужно будет вызвать функцию jQuery в обратном вызове $ (document) .ready (). Вы можете хранить код в своем пространстве имен, используя функцию, которая вызывает 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

Два варианта:

1. Поместите код внизу страницы, прежде чем закрывать тег body.
2. преобразовать объект селекторов в функцию и вызвать ее в DOM ready. Если вы хотите кэшировать его перед запуском init (), вы можете сделать это в функции события 'ready' перед вызовом init ():

-

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 4

Другой ответ заключается в том, что функция init может выполнять фактическую настройку селекторов! Таким образом, вы все еще можете кэшировать селекторы, но код не запускается до того, как DOM будет готов.

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

Мне пришлось определить пустой объект селекторов, который заполняется при инициализации.Затем я должен объявить «селекторы» как переменную, если я не хочу делать IT.TopSlide.selectors.div (слишком долго для меня) каждый раз, когда я хочу этот div.Спасибо.