Estou criando um filtro para uma galeria, onde são exibidos apenas as imagens que correspondem as tags selecionadas. Encontrei diversos exemplos para galeria com tag única. No meu caso, uma imagem pode conter diversas tags. Ex:
Tags: 2018, 2019, amarelo, azul, verde, vermelho;
Imagem 1: [2019, azul, vermelho];
- Imagem 2: [2019, verde, vermelho];
- Imagem 3: [2018, azul, verde];
- Imagem 4: [2019, verde, amarelo];
Ao selecionar uma tag, incluo a mesma em um array, onde está funcionando tudo certo. Meu problema está sendo filtrar as imagens através das tags selecionadas.
Ex: Seleciono as tags "2019" e "verde".
Utilizando um forEach, o agrupamento das imagens seriam do tipo "OR":
var filtro ['2019', 'verde'];
filtro.forEach(function(valor, chave){
$('.filter').filter('.'+valor).show('3000');
});
Com isso, é exibido todas as imagens que contém "2019" OU "verde". Porém preciso agrupar de modo que que todas as tags correspondam a imagem com "2019" E "verde". Consegui utilizando o código abaixo, utilizando o "filter" várias vezes seguido:
$('.filter').filter('.'+filtro[0]).filter('.'+filtro[1]).show('2000');
Minha questão é: há alguma forma de otimizar este código, visto que a quantidade de tags é indeterminado?