1

継承した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行の間の定義がどのように失われているのか誰かが指摘できますか？

4

4 に答える 4

3

バインド関数のスコープ内でハッシュを定義しているように見えます:

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

したがって、その関数の外には存在しません。hashchange イベント時の window.location.hash の値に基づいてその変数にアクセスしたい場合は、bind '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);

しかし、$(window).trigger("hashchange") 行の hash の値は設定されない可能性が高くなります。

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

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

于 2011-07-11T15:13:58.470 に答える
1

変数のスコープは、コードhashのセクションで呼び出される無名関数のみである.bind()ため、その関数の実行が終了すると存在しません。

于 2011-07-11T15:07:54.163 に答える
1

あなたが欲しい

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

Anthony Grist が言ったように、無名関数で定義した変数ハッシュは、そこに到達するまでには存在しません。

于 2011-07-11T15:14:36.543 に答える