1

我在让 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>

是否可以将哈希附加到此类点击功能并从外部页面链接到这些哈希（显示相关内容）？

4

1 回答 1

1

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

看看我的分叉小提琴：

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

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

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

我只是将您的点击事件代码排除在一个单独的函数中。click 事件现在更改触发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');
    });
});
于 2013-03-23T16:08:49.997 回答