2

現在、jQuery isotope プラグインと hashchange 関数に問題があります。div のグリッドがあり、ページの読み込み時にのみgrid-block-filterdiv が表示されます。div の 1 つをクリックする.grid-block-filterと、関連するコンテンツが表示され、URL にハッシュを添付して、ユーザーが他の場所からナビゲートできるようにします。これはすべて正常に機能します。私の例ですが、私の問題を説明します:
jsFiddle (ハッシュ付き): http://jsfiddle.net/neal_fletcher/vcffM/9/show

jQuery:

$(document).ready(function () {

    var $container = $('#main-grid');

    if (location.hash != "") {
        var hashfilter = "." + location.hash.substr(1);
    } else {
        var hashfilter = "*";
    }

    $container.imagesLoaded(function () {
        $container.isotope({
            filter: hashfilter + '.nav-block',
            itemSelector: '.grid-block',
            animationEngine: 'best-available',
            masonry: {
                columnWidth: 4
            }
        });
    });

    $('.grid-block-filter a').click(function () {
        var selector = jQuery(this).attr('data-filter');
        var prettyselector = selector.substr(1);
        location.hash = prettyselector;
        return false;
    });

    $(window).hashchange(function () {

        if (location.hash != "") {
            var hashfilter = "." + location.hash.substr(1);
        } else {
            var hashfilter = "*";
        }


        $container.imagesLoaded(function () {
            $container.isotope({
                filter: hashfilter,
                itemSelector: '.grid-block',
                animationEngine: 'best-available',
                masonry: {
                    columnWidth: 4
                }
            });
        });
    });
});

たとえば をクリックするONE FILTERと、関連するコンテンツが問題なく表示されますが、戻るボタンをクリックするとgrid-block-filter、ページの読み込み時にそのまま表示されるのではなく、すべてのコンテンツが表示されます。とにかくこれを止める方法はありますか？私はそれを理解することはできません。どんな提案でも大歓迎です！

4

1 に答える 1

0

ユーザーが戻るボタンをクリックすると、起動しdocument.readyません。これがあなたが直面している問題の核心です。1 つの方法は、スクリプトを onload メソッドではなくページの下部に配置して、スクリプトが常に実行されるようにすることです。

別の方法は、この StackOverflow の回答のアプローチを取ることです: https://stackoverflow.com/a/170478/1026459

history.navigationMode を 'compatible' に設定すると、jQuery の ready 関数が [戻る] ボタン操作で起動します

history.navigationMode = 'compatible';
$(document).ready( function(){ /* code */ });
于 2013-06-30T18:55:37.520 に答える