0

Tenho o seguinte trecho de código no jQuery:

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
    }
    if ($('#divFiltros').css('visibility') === 'collapse') {
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

Preciso esconder a div se o atributo visibility for igual a visible e exibir a div caso o atributo seja igual a collapse. O problema é que ele entra no primeiro if faz o que eu quero e em seguida entra no segundo if escondendo a div novamente. Como faço para não entrar no segundo if ?

4 Respostas 4

3

Em resumo, você está usando dois if() e sem nenhum retorno. Dessa forma, ele irá entrar nos dois. Uma "alternativa" (gambiarra em minha opinião) seria colocar um retorno no if(). Seria algo como isso:

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
        return;
    }
    if ($('#divFiltros').css('visibility') === 'collapse') {
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

Porém, existe mais duas opções melhores.

A primeira é utilizar somente o if() e else(), desta forma:

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
    }
    else{
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

Dessa forma ele entrará no primeiro ou no segundo, mas nunca nos dois.

Uma segunda opção seria utilizar o else if(). Dessa forma pode ter mais de uma condição, mas só "entrará" na primeira condição aceita.

Ficaria desta forma:

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
    }
    else if ($('#divFiltros').css('visibility') === 'collapse') {
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

Você ainda pode adicionar mais else if ou um else() no final.

Lembrando, que você também pode utilizar um switch(), dependendo do caso.

1

Basta colocar um retorno dentro do primero IF, para que não prossiga a execução:

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
        return true;
    }
    if ($('#divFiltros').css('visibility') === 'collapse') {
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});
1

Você pode usar o Hide/Show do jquery para esconder a sua DIV. Link de tutorial: http://www.w3schools.com/jquery/jquery_hide_show.asp

Exemplo do tutorial: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

Nota-se: Quando entra no primeiro if você faz com que a propriedade visibility receba "collapse", consequentemente no if seguinte ele é verdadeiro e entra também!

Espero ter ajudado!

1

Acredito que a melhor alternativa seja mesmo uma das que o Randrade mencionou

$('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
    }
    else if ($('#divFiltros').css('visibility') === 'collapse') {
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

ou

   $('#btnFiltros').click(function () {
    if ($('#divFiltros').css('visibility') === 'visible') {
        $('#divFiltros').css('visibility', 'collapse');
        $('#divFiltros').css('display', 'none');
    }
    else{
        $('#divFiltros').css('visibility', 'visible');
        $('#divFiltros').css('display', 'block');
    }
});

No entanto, caso queira usar apenas uma variável, pode ser feito assim :

var visivel = true;
 $('#btnFiltros').click(function () {
        if (visivel  === true) {
            $('#divFiltros').css('visibility', 'collapse');
            $('#divFiltros').css('display', 'none');
            visivel = false;
        }else if (visivel   === false) {
            $('#divFiltros').css('visibility', 'visible');
            $('#divFiltros').css('display', 'block');
            visivel = true;
        }
    }); 

Essa opção é válida para evitar a comparação feita pelo .css. Veja o que o artigo do Tableless diz.

Olhando o código-fonte do jQuery, o método .css() possui aproximadamente 20 linhas (sem contar outros métodos chamados). A atribuição acima poderia ser executada da seguinte forma, com uma única linha: jQuery: dicas de otimização e performance

Resumindo, com o uso da variável, você fará apenas uma comparação simples de uma variável.

Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .