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

将click事件处理程序放入hashchange事件中是没有意义的。

看看我的分叉小提琴：

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

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

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

jQuery：将hashchange与click函数相结合

1 个答案: