Якорные теги и история браузера с функцией фильтра Jquery - PullRequest
Новая
       34

Якорные теги и история браузера с функцией фильтра Jquery

0 голосов
/ 15 марта 2012

Я работаю над страницей с навигацией, которая фильтрует товары на странице.Я использовал jQuery hashchange, чтобы добавлять и удалять текущее состояние навигационных ссылок, когда ссылки нажимаются и когда нажата кнопка возврата браузера.Однако функция 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');
            }
        });
    }

});


}

Точка в правильном направлении оченьоценили.

1 Ответ

0 голосов
/ 15 марта 2012

Ммм, немного хитро, но я думаю, что с легким рефакторингом кода и небольшим покерным утомлением вы сможете запускать фильтр из обработчика 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();
});
...