1

hashchange 関数を希望どおりに動作させるのに問題があります。現在、div の組積造グリッドがあり、すべての行 (4 つ) の後に div がクリアされていますが、これは非表示になっています。div の 1 つをクリックすると、最も近いクリア 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

クリック イベント ハンドラーを hashchange イベントに配置しても意味がありません。

私の分岐したフィドルを見てください：

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

次の URL でハッシュ処理を確認できます。

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

クリックイベントコードを別の関数に除外しました。クリック イベントは、イベントを発生させる 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');
    });
});
于 2013-03-23T16:08:49.997 に答える