Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

addClass e CSS

Referente ao curso jQuery: domine a biblioteca mais popular do mercado parte 1, no capítulo Funções que auxiliam os estilos e atividade Estilizando o jogo

por Renan Andreatta
| 168.3k xp | 8 posts

Olá, no vídeo foi pedido para colocar campo.addClass("campo-desativado"); no main.js para alterar a cor via CSS, porém nada acontece. Meu código está levemente diferente, pois havia um bug no cronometro por causa de variáveis globais. Ainda posso usar addClass pra mudar via CSS ?

function inicializaCronometro() {
    var tempoRestante = tempoInicial
    campo.one("focus", function(){
        var cronometroId = setInterval(function(){
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if(tempoRestante <=0){
                campo.attr("disabled", true);
                clearInterval(cronometroId);
                campo.addClass("campo-desativado");
            }
            $("#botao-reiniciar").click(function(){
                clearInterval(cronometroId);      
            });
        },1000);
    });
.campo-desativado{
    background-color: red;
};
4 respostas
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Renan! Como vai?

Chegou a verificar no console do navegador se alguma mensagem de erro é exibida? Se sim, vc poderia colar ela aqui, por favor? Outra coisa, na aba elements do developer tools verifique se a referida classe é adicionada ao elemento em questão.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Renan, tudo bem? Vamos lá:

Ainda posso usar addClass pra mudar via CSS ?

Olhando o seu código, tudo parece estar ok, acredito que não há nenhum problema em continuar utilizando o addClass.

Mas, posso estar deixando passar algum pequeno detalhe, por isso, vou pedir para compartilhar o projeto.

Pode compartilhar através do Github ou Google Drive (zipado).

Espero ter ajudado.

por Renan Andreatta
| 168.3k xp | 8 posts

a unica coisa que resolveu foi colocar isso no css

.campo[disabled]{
    background-color: lightgray;
}

.campo-desativado{
    background-color: lightgray;
};

Se tivesse só um, ou outro nome, nao funcionava de jeito nenhum. No exercício está um pouco diferente, mas funcionou agora

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Renan, fico feliz que tenha resolvido seu problema.

Porém, estranho a necessidade desse CSS adicional, ao adicionar a classe campo-desativado no campo através da função addClass, era para o mesmo receber os estilos definidos no CSS.

Nesse caso eu precisaria dar uma olhada no problema com mais calma, se quiser compartilhar o projeto, eu vejo por aqui o motivo para precisar adicionar esse CSS a mais.

Abraços e bons estudos.