jQuery:结合hashchange和click函数

Question

我在获取hashchange函数以我想要的方式工作时遇到了一些麻烦。我目前有一个div的砌体网格，每一行(4)后清除div，这是隐藏的。点击其中一个div显示最近的清除div，在其中添加相关内容并重新加载周围的砌体。
这一切都很好，但我想链接到这些div正在从其他页面显示，我要附加哈希函数。哈希值被添加到URL，但如果你加载URL，它无法运行该函数并显示相关div。
这是一个网址: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/

您可以检查下面url的哈希处理:

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

我只是将您的单击事件代码排除到单独的函数中。click事件现在改变了触发hashchange事件的url散列。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');
    });
});