jquery filtrada lista seleccionar
Pergunta
Eu terminei este tutorial em 'Criando um ‘Filterable’ Carteira com jQuery' de Nettuts + e estava querendo tweek-lo um pouco.
Gostaria de, em vez de clicar na navegação superior e cada filtros de categoria com base no que foi clicado, eu quero clique em um 'Design' e se eu clicar em outro 'CMS' eles vão mostrar os itens de ambas as categorias. Quando clicado novamente irá transformar esse filtro fora e mostrar tudo o que for selecionada.
Assim, em outras palavras, eu quero isso para mostrar o que sempre eu selecionar e eu desmarcar clicando a categoria novamente.
Abaixo está o arquivo JS que estou usando:
$(document).ready(function() {
$('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').fadeIn('slow').removeClass('hidden');
} else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
Qualquer ajuda sobre isso seria ótimo. Obrigado.
Solução
Tente manter uma matriz de elementos alternados. Eu não posso testar isso, mas o seu próximo eu acho.
Editar :. Agora testado e funcionando
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).toggleClass('toggled_filter').parent().toggleClass('current'); // toggle a class for its state
$(this).css('outline','none');
var filterValList = [];
$('.toggled_filter').each(function(){
// add each text item to the list
filterValList.push($(this).text().toLowerCase().replace(' ','-'));
});
if($.inArray('all', filterValList) != -1 || filterValList.length === 0) {
$('ul#filter li:first').addClass('current');
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#filter li:first').removeClass('current');
$('ul#portfolio li').each(function() {
var classes = $(this).attr('class').split(/\s+/);
// go through each of the classes on each element
// and hide them if they aren't toggled on
var match_found = false;
for(var i in classes){
if($.inArray(classes[i], filterValList) != -1) {
match_found = true;
}
}
// check and see if anything matched
if(!match_found){
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});