jQuery:将 hashchange 与点击功能相结合

Question

我在让 hashchange 函数按我希望的方式工作时遇到了一些问题。我目前有一个 div 的砌体网格，每行(4 行)后都有一个清除 div，这是隐藏的。单击其中一个 div 会显示最近的清除 div，在其中附加相关内容并重新加载其周围的砌体。
这一切都很好，但是因为我想链接到从其他页面显示的这些 div，所以我想将散列附加到函数。哈希被添加到 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

将点击事件处理程序放入 hashchange 事件没有意义。

看看我的 fork fiddle :

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

您可以通过以下网址检查哈希处理:

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

我只是将您的点击事件代码排除在一个单独的函数中。点击事件现在更改触发 hashchange 事件的 url 哈希。hashchange 事件然后调用 showDetail。

当然你也可以直接调用showDetail而不改变hash。

$(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');
    });
});