js中的location.hash问题

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，但这一次在控制台选项卡上，它非常清楚地显示了哈希IS的定义：

有人能指出它在console.log和.trigger行之间失去定义吗？

Answer 1

看起来好像是在bind函数范围内定义哈希：

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

因此在该功能之外不存在。 如果你想根据window.location.hash在hashchange事件发生时的值访问该变量，我会在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';

行不会被运行。我认为您需要更仔细地检查工作流程。

Answer 2

hash变量的范围只是在代码的.bind()部分中调用的匿名函数，因此一旦该函数执行完毕就不存在。

Answer 3

你想要

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

正如Anthony Grist所说，你在匿名函数中定义的变量哈希在你到达那里时并不存在。

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

});