Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Esconder ou mostrar DIV conforme TAG

Boa noite,

Estou com um problema para resolver que é o seguinte, tenho uma div com um titulo uma imagem e uma data, isso é um blog do wordpress.

Só que preciso filtrar por tag na mesma página, então quando o usuário clicar na tag, so vão ser mostradas os post com essa tag(a pagina e carregada com todos os post, e apos o clique, só ficam visíveis as com a tag escolhida).

minha estrutura HTML

<div class="container-blog-art display-flex">
                <a href="<?php the_permalink(); ?>" class="link-box-page-blog">
                <div class="class-box-art-blog display-flex-column">
                    <p class="img-blog-page"><?php the_post_thumbnail(); ?></p>
                    <h1 class="title-box-blog"><?php the_title(); ?></h1>        
                    <p class="data-blog-art"><?php the_date( 'd/m/Y' ); ?></p>
                    <p class="tags-blog"><?php the_tags(); ?></p>
                </div>
            </a>
</div>

eu vou pesquisa esse <p class="tags-blog"><?php the_tags(); ?></p>, e verificar se tem a tag selecionada, se tiver esse div : <div class="class-box-art-blog display-flex-column"> te que ficar e as demais tem que sumir.

Só que dentro da minhas tag do meu p eu tenho varias tags e tenho que fazer um match('Tecnologia'), até ai eu cheguei:

Código js:

jQuery(document).ready(function($){
    $('.tag-ted').click(function(){
        $this = $(this)
        if($('.tags-blog').parent().parent().parent().find('.container-blog-art').find('.class-box-art-blog').find('.tags-blog').text().indexOf('Tecnologia') != -1){
            console.log($('.tags-blog').parent().parent().parent().find('.container-blog-art').find('.tags-blog').length);
            $('.tags-blog').parent().parent().parent().find('.container-blog-art').find('.class-box-art-blog').find('.tags-blog').text().match('Tecnologia').hide();


        }

    })
});

Só que nao sei agora como esconder as outras, se alguem tiver uma ideia vou agradecer muito.

obrigado.

3 respostas
solução

Fala aí Gabriel, tudo bem? Em vez de fazer isso com jQuery, porque você não manda o usuário para a rota de tag? No Wordpress você pode utilizar o /tag/{tag}, ele já ira filtrar para você.

O seu código HTML poderia ser mais ou menos assim:

<a class="o-post__tag" href="<?=get_tag_link($tag->term_id);?>" role="link"><?=$tag->name;?></a>

Espero ter ajudado.

Fala Matheus, muito obrigado cara sempre salvando.

Mágina, sempre que precisar não deixe de criar suas dúvidas.

Abraços