Creación de compatibilidad con etiquetas hash para el complemento de filtro Jquery

Quería un sistema de filtrado SÚPER básico para la página de mi cartera, de modo que cuando el usuario haga clic en "marca", solo aparezca un nombre de clase de marca (y el resto se oculte), y cuando el usuario haga clic en el diseño de impresión, solo se mostrará la impresión. arriba, etc

He usado isótopos y arenas movedizas, pero esta vez quería una forma ultra básica de hacerlo sin ningún efecto. Así que opté por usar este script. El jquery es bastante simple: busca elementos de cartera que tengan la misma clase que el enlace de filtro y mostrar/ocultar. Aquí está el jQuery:

$('ul#filter a').click(function() {
    $(this).css('outline','none');
    $('ul#filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

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

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

    return false;
});

En mi encabezado/navegación, tengo una navegación que incluye todos estos enlaces filtrables. Entonces, debajo de "trabajo" en la navegación, tengo todos los objetos filtrables. Cuando un usuario hace clic en "Marca", se le lleva a la página de trabajo, donde se muestran todos los elementos de la cartera (no SOLO los elementos de marca). Esto se debe a que este script jquery no admite etiquetas hash. Es decir, cada estado de la cartera filtrada no tiene asociada una URL. Estoy buscando agregar esta funcionalidad, pero no estoy muy seguro de por dónde empezar.

Noté que hay un complemento hashchange que parece exactamente la solución que necesito. ¿Puede alguien ayudarme a agregar soporte para hashtags o usarlos con este complemento hashchange? ¡Gracias por adelantado!

preguntado el 03 de mayo de 12 a las 18:05

Aquí hay un ejemplo usando hashchange que funciona muy bien: benalman.com/code/projects/jquery-hashchange/examples/… -

Como comentario aparte: ¿Por qué muestras/ocultas elementos? y añadir/quitar un .hidden clase CSS? ¿La clase CSS no sería suficiente? -

Si tuviera que eliminar el mostrar/ocultar, ¡el script no funcionaría! ¿Alguna idea de cómo integrar un hash/URL para cada enlace? -

1 Respuestas

No estoy seguro si esta es la mejor manera de manejar este problema, pero la solución que se me ocurrió es asignar hashtags a cada enlace de anclaje en la navegación. Y luego apliqué el siguiente jquery para que funcione:

var thispage = window.location.hash;

if(thispage == ''){
    $('ul#filter li:nth-child(1)').addClass('current');
}
if(thispage == '#brand-id'){
    $('ul#filter li:nth-child(2)').addClass('current');
}
if(thispage == '#print'){
    $('ul#filter li:nth-child(3)').addClass('current');
}
if(thispage == '#book-and-editorial'){
    $('ul#filter li:nth-child(4)').addClass('current');
}
if(thispage == '#web'){
    $('ul#filter li:nth-child(5)').addClass('current');
}
if(thispage == '#packaging'){
    $('ul#filter li:nth-child(6)').addClass('current');
}
if(thispage == '#exhibit'){
    $('ul#filter li:nth-child(7)').addClass('current');
}

var currentpage = thispage.replace('#','');

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

Parece inflado, pero ¿hay una mejor manera de hacerlo, tal vez incorporándolo al guión original?

contestado el 03 de mayo de 12 a las 20:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.