Как использовать переменную из другой функции в JQuery

Question

Это базовая версия моей функции (я делаю это в первый раз, поэтому извините, если я не очень хорошо ее объясню)

var pages = {
    init:function(){

    },
    home:function(){

        articleid = this.closest("article").attr('id');
        skillsbtn =  $(this).hasClass("skillsbt");
        home = $('#home');
        homeheight = '-' + home.height();

    if (skillsbtn && articleid == "home"){
        home.animate({"marginTop"   : homeheight},800);
    }
},
    work:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    skills:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    contact:function(){

    },
}

Так что идея - skillbtn = $(this) относитесь к тому, что $(this) находится в home:function.Я попытался дублировать переменные от home:function до work:function, и он проснулся прекрасно.Но могу ли я поместить нужную мне переменную в init:function, но иметь возможность вызывать их внутри home:function и, таким образом, иметь возможность изменить то, что когда-либо $(this), означать это -> дом, или это -> работа

Я пытался получить к нему доступ, как pages.init.skillsbtn.call(this), но он умирает, не работает.

Надеюсь, вы можете помочь - Спасибо

Answer 1

Создайте другой объект, который содержит переменные, которые вам нужны, чтобы быть в глобальной области видимости, и используйте его в качестве хранилища.Попробуйте это:

var pages = {
    init: function() {
    },
    settings: {
        skillsButton: "test"
    },
    home: function() {
        this.settings.skillsButton = "value changed in 'home'";
    }
}

Затем вы можете обратиться к settings.skillsButton везде, где вам это нужно.

Пример скрипта

Answer 2

Вы используете глобальные переменные повсюду (где var перед каждым из четырех первых назначений в функции home)?

Вы хотите поделиться состоянием и не используете объекты для этого?Вот для чего они.Что такое страницы?Если это какое-то «хранилище» или «пространство имен», возможно, используйте имя UpperCase, чтобы отличить его от простого экземпляра.

Поскольку this в событиях jQuery привязано к источнику события, выне может использовать this явно, но вы можете сделать это:

var Pages = {
    init:function(){
      Pages.worker = new PagesWorker;
      // later if you see fit you can have more of these
    },
    home:function(){
      return Pages.worker.home($(this));
    },
    work:function(){
      return Pages.worker.work($(this));
    },
    skills:function(){
      return Pages.worker.skills($(this));
    },
    contact:function(){
      return Pages.worker.contact($(this));
    },
}

function PagesWorker(src){
  // init
}

PagesWorker.prototype.home = function(src){

    // use var xxx = yyy for ones local for this function only
    // use this.xxx = yyy for those that should persist between functions   
    var articleid = src.closest("article").attr('id');
    this.skillsbtn =  src.hasClass("skillsbt");
    var home = $('#home');
    var homeheight = '-' + home.height();

    if (this.skillsbtn && articleid == "home"){
        home.animate({"marginTop"   : homeheight},800);
    }
};

PagesWorker.prototype.work = function(src){
  //same variables are requred here: skillsbtn etc.
  //no problem, use this.skillsbtn etc.
};

PagesWorker.prototype.skills = function(src){
  //same variables are requred here: skillsbtn etc.
  //no problem, use this.skillsbtn etc.
};

PagesWorker.prototype.contact = function(src){
  //same variables are requred here: skillsbtn etc.
  //no problem, use this.skillsbtn etc.
};

Если вы действительно уверены, что у вас будет только один объект страниц, вы можете использовать pages.xxx для совместного использования переменныхмежду вызовами функций и вашим исходным кодом.Но это не то, что нужно делать, если вы действительно, действительно уверены.

Answer 3

Сделайте переменную глобальной, объявив ее вне функции и назначив ее внутри функции

var globalVar,
    pages = {
    init:function(){

    },
    home:function(){

        articleid = this.closest("article").attr('id');
        skillsbtn =  $(this).hasClass("skillsbt");
        home = $('#home');
        homeheight = '-' + home.height();

    if (skillsbtn && articleid == "home"){
        home.animate({"marginTop"   : homeheight},800);
    }
},
    work:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    skills:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    contact:function(){

    },
}

Затем назначьте все, что вы хотите использовать для глобальной переменной