4

Eu estou refatorando o CSS de uma função do sistema e para tratar a propriedade do CSS e não uma string eu troquei esta linha de código: (da 1a maneira estava funcionando corretamente)

var ultimaMensagem = $("#box-confirm:not([style*='display: none;']),#box-erro:not([style*='display: none;'])").last();

por esta:

var ultimaMensagem = $('#box-confirm:not(:visible),#box-erro:not(:visible)').last();

E assim o bloco de código ficou assim:

GerenciadorModais.prototype.FecharModal = function () {        
        var ultimaModal = $(".modalJanela").last(); //Pegar a ultima Modal que será fechada

        //var ultimoBlock = $(".modal:not([style='display: none;'])").last(); //Maneira antiga
        var ultimoBlock = $(".modal:not(:visible)").last(); //Pegar a ultima div que será somente escondida

        //var ultimaMensagem = $("#box-confirm:not([style*='display: none;']),#box-erro:not([style*='display: none;'])").last(); //Maneira antiga
        var ultimaMensagem = $('#box-confirm:not(:visible),#box-erro:not(:visible)').last(); //Pegar a ultima div de mensagem que será somente escondida

        if (ultimoBlock.length > 0) { // Deixar invisivel essa div
            ultimoBlock.css('display', 'none'); 
        } else 
            if (ultimaMensagem.length > 0) { // Deixar invisivel essa div
                ultimaMensagem.css('display', 'none'); 
            } else { // fechar essa modal
                ultimaModal.remove(); 
                $(".block").last().remove();
                this.nivelModal--;
            }

        if (!$(".modalJanela").length > 0) //Fechar a layer escura
            $('#btn-center-dialog').fadeOut();
    };

debugger do JS

URL DA IMAGEM ACIMA

Eu levei em consideração o que está escrito neste post: https://stackoverflow.com/questions/17425543/difference-between-hidden-and-notvisible-in-jquery

Mas eu não tenho certeza se isso não trará problemas futuros. Basicamente eu preciso pegar todos os #box-confirm e #box-erro que estão invisíveis de alguma maneira na tela.

Então minhas dúvidas são:

1) Por que não funciona essa alteração? Obs.: Estou fazendo uns testes e reparei que o que não está funcionando é o ultimo else que realmente fecha uma modal, mas isso provavelmente está acontecendo por que ele está tentando fechar uma das divs e não a modal.

2) Existe alguma possibilidade de que ele não pegue o ultimo seletor que esteja invisível na tela?

3) Existe alguma maneira melhor de fazer isso ou essa já é a melhor solução?

2 Respostas 2

3

Na verdade, :not([style*='display: none;']) deveria ser traduzido para :visible, e não para :not(:visible).

Afinal, um elemento que não tem display: none; é visível.

7
  • Eu alterei, mas está dando erro. Estou escrevendo isso certo? Uncaught Error: Syntax error, unrecognized expression: .modal(:visible) ou Uncaught Error: Syntax error, unrecognized expression: .modal:(:visible) Commented 1/07/2015 às 17:17
  • Acho que assim fica mais facil de entender: var ultimoBlock = $(".modal(:visible)").last(); Isso aqui está está errado, saberia dizer qual a maneira correta? Commented 1/07/2015 às 17:19
  • 1
    \Õ/ deste jeito que tu postou funcionou na modal \o/ Obrigado! Agora só falta eu verificar se está ok nos outros 2 casos Commented 1/07/2015 às 17:21
  • 1
    Funcionou em todos os casos! Obrigado! Commented 1/07/2015 às 17:30
  • 1
    Tem razão, falta de atenção minha +1
    – Syzoth
    Commented 1/07/2015 às 17:32
2

No caso o correto não seria #box-confirm:not(:visible), mas sim #box-confirm:visible pois :not() com style*='display: none;' procura elementos visíveis como dito pelo @falsarella.

:visible vs seletor por atributos

Supondo que usando o original o e seu html fosse:

<div style="display:none !important;">

Em alguns navegadores (se não em todos) o seletor não o encontraria.

Realmente o melhor é usar o :visible pois ele verifica tanto:

  1. DOM.style.display !== "none"

  2. DOM.style.visibility === "visible"

  3. <input type="hidden">

Seletor por classe e performance

Outro que você pode usar (que pode ser em micro-optimização mais rápido) seria uma classe:

.hide { display:none; }

Desta maneira:

var ultimaMensagem = $('#box-confirm.hide,#box-erro.hide').last();

Ele é mais rápido teoricamente devido a fazer apenas uma verificação, enquanto no :visible, ele pode fazer mais de uma (dependendo da situação).

Note também que :visible é um seletor jQuery e não padrão, portanto neste caso o jquery não vai usar o querySelector (que é mais rápido por ser nativo). Já os seletores por classe são nativos.

Nota: o jQuery usa o querySelector (ou querySelectorAll) quando há suporte para a função e para o seletor, tornando as consultas mais rápidas.

13
  • 1
    @MaiconCarraro quando notar um erro de digitação pode editar :)
    – Syzoth
    Commented 1/07/2015 às 14:59
  • 1
    Farei das próximas vezes :) Commented 1/07/2015 às 15:04
  • Obrigado! Eu apoio as edições!! kk - obrigado por me atentar ao problema, já corrigi.
    – Syzoth
    Commented 1/07/2015 às 15:06
  • Guilherme, eu fiz a alteração, mas eu não sei porque não está funcionando... :/ Commented 1/07/2015 às 16:31
  • Eu editei o post com mais informação para ser possível responder uma das partes da pergunta. Commented 1/07/2015 às 16:41

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 .