jQuery - 从另一个函数变量调用函数变量

Question

Why doesn't this work:

  var foo = function() {
     ...
  };

  var boo = function() {
     ... 
     el.foo();
   }

?

I get a foo is undefined error. But I just defined it above...

Answer 1

You just need to call foo(), not el.foo(). (Unless I'm missing something about how you're using this.)

Answer 2

Since foo is not a function defined/attached to el hence you can't call foo from el's context. You need to call foo directly.

  var foo = function() {
     ...
  };

  var boo = function() {
     ... 
     foo();
   }

However if you need to call foo attached to el's context then try this:

var boo = function() {
         ... 
         foo.call(el);//This calls foo in el's context
       }

Answer 3

If I understand you correctly, you need to create a jQuery plugin function:

jQuery.fn.foo = function(){
    return this.each(function(){
        // element-specific code here
    });
};

var boo = function() {
     ... 
     el.foo();
}

Answer 4

Because foo isn't a property of el . It's a variable.

You'd need:

var foo = function() {
   //...
};

var boo = function() {
   //... 
   foo();
}

It would work if you had:

var el = {};
el.foo = function() {
    // ...
};

var boo = function() {
   //... 
   el.foo();
}

Answer 5

In this instance it looks like foo() is a not a property of the object el . You defined the function, but from the example shown, it is probably a global function. If you want foo() to work on the variable el , then pass it to the function, like so:

 var foo = function(element) {
     //do something with this element
  };

 var boo = function() {
     ... 
     foo(el); //pass el into the foo function so it can work on it.
 }

Answer 6

I assume, if you are trying to call:

 el.foo()

Then el is jQuery object, something like

 var el = $("#smth");
 el.foo();

In this case you need to define 'foo' as:

$.fn.foo = function() {
....
}

Otherwise, if you are just trying to call 'foo' from 'boo', then just call it without 'el':

var foo = function() {
 ...
};

var boo = function() {
  ... 
  foo();
}

Hope, it helps.