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)的任何内容，意味着 - ＆gt;主页，或者这个 - >工作

我试图像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。

Example fiddle

Answer 2

通过在函数外声明变量并将其赋值在函数

中来使变量成为全局变量

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

    },
}

然后将您想要使用的任何内容分配给全局变量

Answer 3

您使用全局变量（var函数中每个前四个赋值之前的home位置？

您想要共享状态而不使用对象吗？这就是它们的用途。什么是页面？如果它是某种类型的存储库＆＃39;或者＆＃39; namespace＆＃39;，也许使用UpperCase名称来区分它不是普通的实例。

由于jQuery事件中的this绑定到事件的源，因此您无法明确地使用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在函数调用和原始代码之间共享变量。但除非你真的非常确定，否则这不是正确的做法。

如何在jquery中使用来自另一个函数的变量

3 个答案: