location.hash issue in js

I have a piece of javascript that I inherited; it's being used as a tab switcher. Unfortunately it's not working. Here's the code:

$(document).ready(function(){

    /* This is the back button friendly tab switcher */
    var trackContainers = $('.switcher > .results');
  trackContainers.hide().filter(':first').show();

  $(window).bind('hashchange', function () {
    var hash = window.location.hash || '#dpp';
    console.log('hash: ' + hash);

    trackContainers.hide();
    trackContainers.filter(hash).show();
    $('ul.tabs li').removeClass('active');
    $('a[hash='+hash+']').parent().addClass('active');
  });

  $(window).trigger("hashchange").location(hash);

});

What's supposed to happen is when a specific tab is clicked, it changes the class of the li tag surrounding the clicked tab. Here's what the tab code looks like:

<div class="switcher"> 
<ul class="tabs"> 
<li  class="inactive"><a href="#dpp">Digital Path to Purchase</a></li> 
<li class="inactive"><a href="#cre">Fueling Creativity</a></li> 
<li class="inactive"><a href="#bpp">Best Practices/Big Picture</a></li> 
<li class="inactive"><a href="#si">Shopper Insights 101</a></li> 
<li class="inactive"><a href="#dem">Who Is Your Shopper</a></li> 
<li class="inactive"><a href="#gt">Google Theater</a></li> 
<li class="inactive"><a href="#res">Understanding the Shopper</a></li> 
<li class="inactive"><a href="#bar">Brand Activation at Retail</a></li> 
<li class="active"><a href="#duc">Deeper Understanding of Center Store</a></li> 
</ul> 
</div> 
</div> 

You can see that the link called #duc has the active class on its li item. However, when I look at the script code in Firebug, it gives me an error saying hash is not defined:

Again, looking in Firebug, but this time at the console tab, it very clearly shows that hash IS defined:

Can anyone point out h开发者_运维问答ow it's losing its definition between the console.log and the .trigger lines?

It looks as though you are defining hash within the scope of your bind function :

$(window).bind('hashchange', function () {
    var hash = window.location.hash || '#dpp';

It therefore does not exist outside of that function. If you wanted access to that variable based off the value the window.location.hash was at the time of your hashchange event, I would create a variable outside of the bind 'hashchange' function so it has access to that variable.

var hash;

$(window).bind('hashchange', function () {
    hash = window.location.hash || '#dpp';
    console.log('hash: ' + hash);

     trackContainers.hide();
     trackContainers.filter(hash).show();
     $('ul.tabs li').removeClass('active');
     $('a[hash='+hash+']').parent().addClass('active');
});
$(window).trigger("hashchange").location(hash);

But the value of hash at the $(window).trigger("hashchange") line will not be set more than likely because that event may not have fired and the

hash = window.location.hash || '#dpp';

line will not have been run. I think you need to examine the workflow a little closer.

The scope of the hash variable is only the anonymous function being called in the .bind() section of the code, so doesn't exist once that function has finished executing.

you want

$(window).trigger("hashchange").location(window.location.hash);

As Anthony Grist said, the variable hash you defined in the anonymous function doesn't exist by the time you get there.

$(document).ready(function(){

/*I moved it out of the function because the var was only in existence in the bind function before. Now its going to exist still when you call it at $(window)*/
var hash = window.location.hash || '#dpp';   


 /* This is the back button friendly tab switcher */
    var trackContainers = $('.switcher > .results');
  trackContainers.hide().filter(':first').show();

  $(window).bind('hashchange', function () {

    //here, i'm simply changing its value, which was set on line 4 outside of the fn.
    hash = window.location.hash || '#dpp';
    console.log('hash: ' + hash);

    trackContainers.hide();
    trackContainers.filter(hash).show();
    $('ul.tabs li').removeClass('active');
    $('a[hash='+hash+']').parent().addClass('active');
  });

  $(window).trigger("hashchange").location(hash);

});