Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

DinhoPHP

If, else if e else confuso

Por , em Javascript

Recommended Posts

DinhoPHP    1

DinhoPHP
Postado

Olá! Desejo exibir uma div após o link da div com id="#link_busca_adv" receber um clique e escondê-la novamente ao receber outro click. Muito simples, porém este código não a esconde novamente.

  

$(document).ready(function () {

    $('#link_busca_adv').click(function () {

        var data = $('#rowform').css('visibility', 'hidden');

        if (data.css('visibility', 'hidden')) {
            data.css('visibility', 'visible');
            $('#link_busca_adv').html("Ocultar Busca Avançada");
        }
        else if (data.css('visibility', 'visible')) {
            data.css('visibility', 'hidden');
            $('#link_busca_adv').html("Busca Avançada");
        }

        else{
            data.css('visibility', 'hidden');
            $('#link_busca_adv').html("Busca Avançada");
    }
    });
});

<a id="link_busca_adv" href="#" style="color: #ff0000 !important; display: flex; font-weight: 600; font-size: 0.7em; align-items: center; margin-right: 50px;">Busca Avançada<span class="fa fa-sort-desc" aria-hidden="true" style="color: #FF0000 !important; margin-top: -10px;"></span></a>

<div id="rowform" style="visibility: hidden;" class="linhaForm">
  MENU
</div>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado

É mais viável você pegar definir uma variável para verificação.

Spoiler 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-3.2.1.js" type="text/javascript"></script>
        <title></title>
        <script type="text/javascript">
            $(document).ready(function () {
                var active = null;
                /* DICA! */
                /* Emcapsule todos elementos que vai usar na função antes em variável */
                /* Pode almentar a velocidade de acesso ao DOM em até 800% */
                var data = $('#rowform');
                var btn = $('#link_busca_adv');

                btn.click(function () {
                    if (!active) {
                        data.css({'display': 'block'});
                        btn.html("Ocultar Busca Avançada");
                        active = true;
                    } else {
                        data.css({'display': 'none'});
                        btn.html("Busca Avançada");
                        active = null;
                    }
                });
            });
        </script>
    </head>
    <body>
        <a id="link_busca_adv" href="#" style="color: #ff0000 !important; display: flex; font-weight: 600; font-size: 0.7em; align-items: center; margin-right: 50px;">Busca Avançada<span class="fa fa-sort-desc" aria-hidden="true" style="color: #FF0000 !important; margin-top: -10px;"></span></a>

        <div id="rowform" style="display: none;" class="linhaForm">
            MENU
        </div>
    </body>
</html>

 

 

Também pode ser feito verificando o elemento mais assim acho mais prático.

Compartilhar este post

Link para o post
Compartilhar em outros sites

-Gedson Marcelino-    3

-Gedson Marcelino-
Postado

Segue abaixo:

 

https://jsfiddle.net/gedsonmarcelino/c2yj7ua6/ 

$(function() {

  $('#link_busca_adv').click(function() {
    if ( $('#rowform').css('display') == 'none' ) {
      $('#link_busca_adv').html("Ocultar Busca Avançada");
      $('#rowform').show();
    } else {
      $('#link_busca_adv').html("Busca Avançada");
      $('#rowform').hide();
    }
  });

});

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

DinhoPHP    1

DinhoPHP
Postado
Em 18/12/2017 at 09:11, Omar~ disse:

É mais viável você pegar definir uma variável para verificação.

  Mostrar conteúdo oculto 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-3.2.1.js" type="text/javascript"></script>
        <title></title>
        <script type="text/javascript">
            $(document).ready(function () {
                var active = null;
                /* DICA! */
                /* Emcapsule todos elementos que vai usar na função antes em variável */
                /* Pode almentar a velocidade de acesso ao DOM em até 800% */
                var data = $('#rowform');
                var btn = $('#link_busca_adv');

                btn.click(function () {
                    if (!active) {
                        data.css({'display': 'block'});
                        btn.html("Ocultar Busca Avançada");
                        active = true;
                    } else {
                        data.css({'display': 'none'});
                        btn.html("Busca Avançada");
                        active = null;
                    }
                });
            });
        </script>
    </head>
    <body>
        <a id="link_busca_adv" href="#" style="color: #ff0000 !important; display: flex; font-weight: 600; font-size: 0.7em; align-items: center; margin-right: 50px;">Busca Avançada<span class="fa fa-sort-desc" aria-hidden="true" style="color: #FF0000 !important; margin-top: -10px;"></span></a>

        <div id="rowform" style="display: none;" class="linhaForm">
            MENU
        </div>
    </body>
</html>

 

 

Também pode ser feito verificando o elemento mais assim acho mais prático.

 

Muito obrigado aos dois, e Omar mais uma vez dando aquela força rs e foi o estilo que adotei, alterando algumas coisas aonde a alteração principal se deu no estilo css onde fiz uso do visibility. Gostei da citação do encapsulamento, porém sou muito cru em JQuery, e tenho uma pergunta: isso acontece em var active = null; ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado

Se eu entendi a pergunta, então a resposta é não.

 

No caso a variável é nula para verificar se uma ação foi executada. Se não então executa tal ação e modifica essa variável para verdadeira. Então se a variável é verdadeira faça outra coisa e mude ela para nula.

 

Quando se usa $('alguma_coisa'), a biblioteca jquery vai executar inúmeros loops buscando esses dados no DOM, então na teoria é, minimizar a quantidade de loop para uma única vez quando o script é carregado, do fazer os mesmos loops repetitivamente toda vez que ativar uma função.

 

E eu sei pouco ou quase nada sobre termos técnicos da jquery, só sei utilizar cada recurso da biblioteca. Eu prefiro javascript puro por ser mais eficiente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

DinhoPHP    1

DinhoPHP
Postado

Ok Omar, agradeço pelos esclarecimentos que certamente irão mudar a minha visão ao desenvolver algo do tipo. Não segui no Javascript por relaxamento, e como o JQuery está sendo bastante usado e pela simplicidade, optei e desejo me aprimorar nele. Muito obrigado por tudo!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito