In this line of code:
> $('.menu_button').click(this.onClick);
you are getting a refernece to your onClick function. But that's all you get
- a *function* reference. It doesn't remember that you said 'this.onClick'
to get that reference.
As you found, when that function gets called later by jQuery's click event
code, 'this' means something else entirely - it's a reference to the element
receiving the event.
The classic way of fixing this (pun intended) is to use a closure. You could
change that line of code to:
var bar = this;
$('.menu_button').click( function() { bar.onClick(); });
But food for thought: How many MenuBar instances will you be creating? Just
one or a small number? Then you can simplify the code considerably by not
using a prototype. Instead, put the methods inside the constructor and use a
closure for all your object references:
function MenuBar()
{
var bar = this;
bar.currentIndex = 0;
$('.menu_button').click(onClick);
function onClick(evt)
{
bar.currentIndex = 1;
bar.select(bar.currentIndex);
};
bar.select = function(index)
{
//code goes here
};
};
The idea is to get 'this' into a local variable ('bar') right away, and then
use 'bar' everywhere that you would have used 'this'.
onClick doesn't need to be a method of the object because you would never
call it directly, so it's just a nested function.
I assume that Select() would be called as an object method and left it as
such - but I changed its name to select(). Standard JavaScript practice is
to use an initial capital letter in constructors only, and initial lowercase
for other functions and methods.
I left currentIndex as a property of the object, but if you only need it
inside the constructor and object methods, you can do it this way instead:
function MenuBar()
{
var bar = this;
var currentIndex = 0;
$('.menu_button').click(onClick);
function onClick(evt)
{
currentIndex = 1;
bar.select(currentIndex);
};
bar.select = function(index)
{
//code goes here
};
};
You can also use an anonymous function for onClick:
function MenuBar()
{
var bar = this;
var currentIndex = 0;
$('.menu_button').click( function(evt)
{
currentIndex = 1;
bar.select(currentIndex);
});
bar.select = function(index)
{
//code goes here
};
};
-Mike
> From: mrtedweb
>
> Hello everyone,
>
> I'm new to jQuery and need some help with a trivial question.
> I'm trying to program a menu bar and I'm having problems with
> variable scope. Below is a snippet of my code:
>
> //
> **************************************************************
> ****************************************
> <script type="text/javascript">
> $(document).ready(function()
> {
> var menubar = new MenuBar();
> });
> </script>
>
> <script type="text/javascript">
> function MenuBar()
> {
> this.currentIndex = 0;
> $('.menu_button').click(this.onClick);
> };
>
> MenuBar.prototype.onClick = function(evt)
> {
> this.currentIndex = 1; //<--Unable to access
> class variable!!
> this.Select(this.currentIndex); //<--Unable to
> access class funtion!!
> };
>
> MenuBar.prototype.Select = function(index)
> {
> //code goes here
> };
> </script>
> //
> **************************************************************
> ****************************************
>
> Once the onClick event is received the scope move from the
> class to the actual item itself. How do I access class
> variables amd functions after receiving an event??
>
> Any help is greatly appreciated.
>
> -Ted
>
