location.hash jsでの問題

Question

私は継承したjavascriptを持っています。それはタブスイッチャーとして使用されています。残念ながら、それは動作していません。ここでは、コードです：起こることになっているもの

$(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); 

}); 

は、特定のタブをクリックすると、それがクリックされたタブを周囲のliタグのクラスを変更しています。

<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> 

#ducというリンクにli項目のアクティブなクラスがあることがわかります。私はFirebugの中にスクリプトコードを見るとしかし、それはハッシュが定義されていないと言って私にエラーを与える：

繰り返しますが、この時間は、コンソールタブでFirebugの中で見ている、しかし、それは非常に明確に示していそのハッシュが定義されています：

それはにconsole.logと.trigger線の間に、その定義を失っていますどのように誰もが指摘することはできますか？

Answer 1

hash変数の有効範囲は、コードの.bind()セクションで呼び出されている匿名関数だけです。したがって、その関数の実行が終了すると存在しません。

Answer 2

あなたのバインド機能の範囲内でハッシュを定義しているかのように見えます：

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

それ故、その関数の外に存在していません。 その変数にアクセスするには、window.location.hashの値がhashchangeイベントの時点であった場合は、バインド 'hashchange'関数の外に変数を作成して、その変数にアクセスできるようにします。

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); 

しかし、そのイベントが発生していない可能性がありますので、$（ウィンドウ）.trigger（「なhashchange」）ラインは、より可能性が高いに設定されることはありませんで、ハッシュの値と

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

ライン実行されません。ワークフローをもう少し詳しく調べる必要があると思います。

Answer 3

あなたはアンソニー・グリストが言ったように、あなたは匿名関数で定義された変数のハッシュは、あなたがそこに着くまでには存在しません

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

をしたいです。

Answer 4

$(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); 

});