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 的值访问该变量，我将在绑定“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

你要

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

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

于 2011-07-11T15:14:36.543 回答
1

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

于 2011-07-11T15:07:54.163 回答
0 
$(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);

});
于 2011-07-11T15:17:06.680 回答