jQuery: объединение hashchange с функцией щелчка

Question

У меня возникли проблемы с тем, чтобы функция hashchange работала так, как я этого хочу. В настоящее время у меня есть сводчатая сетка divs, с очищающим div после каждой строки (4), которая скрыта. Нажатие на один из div показывает ближайший разделительный div, добавляет в него соответствующий контент и перезагружает кладку вокруг него.
Все это работает отлично, но поскольку я хочу связать эти divs, которые показывают с других страниц, я хочу привязать хеши к функциям. Хеши добавляются в URL-адрес, но если вы загружаете URL-адрес, он не может запустить функцию и показывать соответствующие div.
Вот jsfiddle: http://jsfiddle.net/EV7yg/1/

JQuery:

$(document).ready(function() { 
$(window).hashchange(function(){ 

    $(".content-block-footer").click(function() { 

     $('.content-block-preview').hide(); 
     var previewForThis = $(this).parent(".content-block-small").nextAll('.content-preview:first'); 
     var otherPreviews = $(this).parent(".content-block-small").siblings('.content-preview').not(previewForThis); 
     otherPreviews 
      .addClass('excluded') // exclude other previews from masonry layout 
      .hide(); 
     previewForThis 
      .removeClass('excluded') 
      .append($('#content-preview' + $(this).attr('hook')).show()) 
      .hide() 
      .delay(400) 
      .fadeIn("slow"); 
     $('html, body').animate({ scrollTop: $(this).offset().top-95 }, 'slow'); 
     $('#block-wrap').masonry('reload'); 
    }); 
    }); 
$(window).hashchange(); 
}); 

HTML:

<div id="block-wrap"> 

<div class="content-block-small" style="background-color: white;"> 
<div class="content-block-footer" hook="01"><a href="#test01">READ MORE</a> 
</div> 
</div> 

<div class="content-block-small" style="background-color: white;"> 
<div class="content-block-footer" hook="02"><a href="#test02">READ MORE</a> 
</div> 
</div> 

<div class="content-block-small" style="background-color: white;"> 
<div class="content-block-footer" hook="03"><a href="#test03">READ MORE</a> 
</div> 
</div> 

<div class="content-block-small" style="background-color: white;"> 
<div class="content-block-footer" hook="04"><a href="#test04">READ MORE</a> 
</div> 
</div> 


<div class="content-preview excluded"> 
</div> 


<div id="content-preview01" class="content-block-preview"> 
CONTENT GOES HERE 
</div> 

<div id="content-preview02" class="content-block-preview"> 
CONTENT GOES HERE 
</div> 

<div id="content-preview03" class="content-block-preview"> 
CONTENT GOES HERE 
</div> 

<div id="content-preview04" class="content-block-preview"> 
CONTENT GOES HERE 
</div> 

</div> 

Можно прикрепить хэши к таким функциям щелчка и ссылки на эти хэши из внешних страниц (показывая соответствующий контент)?

Answer 1

Не имеет смысла помещать обработчик события click в событие hashchange.

Имейте взгляд на моей раздвоенную скрипке:

http://jsfiddle.net/y9X2D/35/

Вы можете проверить обработку хэша по следующему адресу:

http://fiddle.jshell.net/y9X2D/35/show/

Я только исключал код вашего мероприятия нажмите в отдельная функция. Событие click теперь меняет URL-адрес URL-адреса, который запускает событие hashchange. hashchange событие затем звонит showDetail.

Конечно, вы также можете позвонить по телефону showDetail без изменения хэша.

$(window).hashchange(function(){ 
    var hash = location.hash; 
    if(hash) 
    { 
    var element = $('.content-block-footer[hook="'+hash.substring(1)+'"]'); 
    if(!element) element = $('.content-block-footer').first(); 
    showDetail(element); 
    } else { 
    element = $('.content-block-footer').first(); 
    showDetail(element); 
    } 
}); 

$(document).ready(function() { 
    $(window).hashchange(); 

    $(".content-block-footer").click(function() { 
     document.location.hash = $(this).attr('hook'); 
    }); 
});