Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Melhorar a apresentação do Display com Filtro JavaScript

por Rafael Antonio Calza
| 31.9k xp | 1 posts

Olá pessoal, será que vocês podem me ajudar? Eu criei um filtro pelo javascript para selecionar os imóveis de uma imobiliária, o filtro funcionou legal, porém quando adiciono a classe "none" para desaparecer os imóveis que não fazem parte daquele filtro, as divs geram espaços vazios entre os imóveis cadastrados.

Eu gostaria que os produtos se reorganizassem na tela, tirando os espaços vazios, dos produtos que foram escondidos com CSS - display: none;

Este é o HTML

<div class="col-8 text-end">
    <div id="filtros"><!-- Filtro por Tipo -->
        <button class="btn btn-light ms-2 px-4 fl-todos" onclick="filtroImoveis('fl-todos')">Ver Todos</button>
        <button class="btn btn-light ms-2 px-4 fl-terreno" onclick="filtroImoveis('fl-terreno')">Terrenos</button>
        <button class="btn btn-light ms-2 px-4 fl-apartamento" onclick="filtroImoveis('fl-apartamento')">Apartamentos</button>
        <button class="btn btn-light ms-2 px-4 fl-casa" onclick="filtroImoveis('fl-casa')">Casas</button>
        <button class="btn btn-light ms-2 px-4 fl-sitio" onclick="filtroImoveis('fl-sitio')">Sítios</button>
        <button class="btn btn-light ms-2 px-4 fl-loteamento" onclick="filtroImoveis('fl-loteamento')">Loteamentos</button>
    </div>
</div>

E este é o JS:

// Esconder os imóveis
let imoveis = document.querySelectorAll(".thumb-imovel");



imoveis.forEach(i => {
    i.classList.add("none");
});

// Parametro passado pelo botão
function filtroImoveis(value){
    let botaoFiltro = document.querySelectorAll("#filtros button");

    botaoFiltro.forEach((botao) => {
        // checar se o botão clicado contém a classe enviada
        if(botao.classList.contains(value) == true) {
            botao.classList.add("current");
        } else {
            botao.classList.remove("current");
        }
    });

    let imoveis = document.querySelectorAll(".thumb-imovel");

    imoveis.forEach((item) => {
        if(value == "fl-todos"){
            item.classList.remove("none");
            console.log(item);
        } else {
            if(item.classList.contains(value)){
                item.classList.remove("none");
            } else {
                item.classList.add("none");
            }
        }
    });
}


// Mostrar todos
window.onload = () => {
    filtroImoveis("fl-todos");
}

E o css assim:

#filtros button.current {
    background-color: #468C77;
    color: #EEE;
    transition: 800ms;
}

.none {
    display: none;
    transition: 800ms;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!
por RODRIGO SILVA HARDER
| 2309.9k xp | 4888 posts

Oi, Rafael, tudo bem?

Desculpa a demora em te responder!

O problema que você está enfrentando ocorre porque ao usar a propriedade display: none; para ocultar os elementos que não se encaixam no filtro, esses elementos ainda ocupam espaço na página. Portanto, é necessária uma abordagem diferente para reorganizar os elementos e remover os espaços vazios.

Podemos solucionar isso utilizando a propriedade visibility em vez de display. A propriedade visibility: hidden; oculta os elementos e não ocupam espaço na página, ao contrário de display: none;. Dessa forma, você pode reorganizar os elementos ocultos sem criar espaços vazios. Ficaria assim:

// Esconder os imóveis
let imoveis = document.querySelectorAll(".thumb-imovel");

imoveis.forEach(i => {
    i.classList.add("hidden");
});

// Parametro passado pelo botão
function filtroImoveis(value) {
    let botaoFiltro = document.querySelectorAll("#filtros button");

    botaoFiltro.forEach((botao) => {
        if (botao.classList.contains(value) == true) {
            botao.classList.add("current");
        } else {
            botao.classList.remove("current");
        }
    });

    let imoveis = document.querySelectorAll(".thumb-imovel");

    imoveis.forEach((item) => {
        if (value == "fl-todos") {
            item.classList.remove("hidden");
        } else {
            if (item.classList.contains(value)) {
                item.classList.remove("hidden");
            } else {
                item.classList.add("hidden");
            }
        }
    });

    // Reorganizar os imóveis visíveis
    let container = document.querySelector(".col-8");
    let visibleImoveis = document.querySelectorAll(".thumb-imovel:not(.hidden)");

    container.innerHTML = "";

    visibleImoveis.forEach((item) => {
        container.appendChild(item);
    });
}

// Mostrar todos
window.onload = () => {
    filtroImoveis("fl-todos");
}

Além disso, você precisará adicionar o seguinte CSS para a classe .hidden:

.hidden {
    visibility: hidden;
    transition: 800ms;
}

Todavia, vale ressaltar que como é um assunto externo ao curso e que não tenho acesso ao cenário completo do projeto, outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!