0

ページ上の製品をフィルタリングするナビゲーションのあるページに取り組んでいます。jQuery hashchange を使用して、リンクがクリックされたとき、およびブラウザーの [戻る] ボタンが押されたときに、nav リンクに現在の状態を追加および削除しました。ただし、filter() 関数は、ナビゲーション リンクがクリックされた場合にのみ機能します。ブラウザーの戻るボタンがクリックされたとき、または URL の末尾にアンカー タグが含まれている場合にフィルター関数を実装したいと思います。

ページへのリンクは次のとおりです。

http://dl.dropbox.com/u/20585252/test/index.htm

そして、関連するJqueryのセクションは次のとおりです。

$(document).ready(function(){

$(window).hashchange( function(){
var hash = location.hash;

$('#nav a').each(function(){
  var that = $(this);
  that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'current' );
});
})

$(window).hashchange();
filter();

});


function filter() {

    $('ul#nav a').click(function() {


    var filterVal = $(this).attr('rel');

    if(filterVal == 'all') {
        $('ul.product li.hidden').show().removeClass('hidden');
    } else {

        $('ul.product li').hide().each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).hide().addClass('hidden');
            } else {
                $(this).show().removeClass('hidden');
            }
        });
    }

});


}

正しい方向へのポイントは非常に高く評価されます。

4

1 に答える 1

0

うーん、少しトリッキーですが、コードの軽度のリファクタリングと少しのジガリーポーキーで、hashchange ハンドラーからフィルターをトリガーできるはずです。

以下のコードはテストされておらず、完全に正しくない可能性がありますが、先に進む方法を提供する必要があります。

$(document).ready(function(){
    $(window).hashchange(function(){
        var hash = location.hash.replace('#','');//remove # for cross-browser compatibility
        $('#nav a').each(function(){
            var that = $(this);
            //that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'current' );
            if(that.attr('href') === hash) {
                that.addClass('current');
                filter.call(that);//call filter with '$(this)' as the context
            }
            else {
                that.removeClass('current');
            }
        });
    });
    function filter() {
        //Note: 'this' is a jquery object due to the way in which filter is called (in two places).
        var filterVal = this.attr('rel');
        if(filterVal == 'all') {
            $('ul.product li.hidden').show().removeClass('hidden');
        }
        else {
            $('ul.product li').hide().each(function() {
                if(!this.hasClass(filterVal)) {
                    this.hide().addClass('hidden');
                }
                else {
                    this.show().removeClass('hidden');
                }
            });
        }
    }
    $('ul#nav').on('click', 'a', function(){
        filter.call($(this));
    });
    $(window).hashchange();
});
于 2012-03-15T02:19:40.307 に答える