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

Похоже, что вы определяете хеш в рамках своей функции связывания:

$(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 = window.location.hash || '#dpp';

линия не будет запущена.Я думаю, что вам нужно изучить рабочий процесс чуть ближе.

Answer 2

Вы хотите

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

Как сказал Энтони Грист, хэш переменной, который вы определили в анонимной функции, к тому времени уже не существует.

Answer 3

Область действия переменной hash - это только анонимная функция, вызываемая в разделе кода .bind(), поэтому она не существует после завершения выполнения этой функции.

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

});