Entrar Ainda não tem acesso?
9
respostas

.toggleClass() não remove classe

Referente ao curso jQuery: domine a biblioteca mais popular do mercado parte 1, no capítulo Funções que auxiliam os estilos e atividade Mãos na massa: Aplicando CSS

por Gabriel Kyomen
| 163.2k xp | 84 posts
FullStack Developer

Olá!

Alguém saberia dizer o motivo do meu .toggleClass(); apenas adicionar a classe, sem conseguir removê-la?

var tempoInicial = $("#tempo-digitacao").text();
var campo = $("#campo-digitacao");

$(function(){
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    $("#botao-reiniciar").click(reiniciaJogo);
});

function atualizaTamanhoFrase() {
  var frase = $(".frase").text();
  var numPalavras = frase.split(" ").length;
  var tamanhoFrase = $("#tamanho-frase");
  tamanhoFrase.text(numPalavras);
}

function inicializaContadores() {
  campo.on("input", function() {
    var conteudo = campo.val();
    var qntPalavras = conteudo.split(/\S+/).length - 1;
    $("#contador-palavras").text(qntPalavras);
    var qtdCaracteres = conteudo.length;
    $("#contador-caracteres").text(qtdCaracteres);
  });
}

function inicializaCronometro() {
  var tempoRestante = $("#tempo-digitacao").text();
  campo.one("focus", function() {
    $("#botao-reiniciar").attr("disabled",true);
    var cronometroID = setInterval(function() {
      tempoRestante--;
      $("#tempo-digitacao").text(tempoRestante);
          if (tempoRestante < 1) {
              campo.attr("disabled", true);
              $("#botao-reiniciar").attr("disabled", false);
              clearInterval(cronometroID);
              campo.toggleClass("campo-desativado");
          }
    }, 1000);
  });
}

function reiniciaJogo() {
  campo.attr("disabled", false);
  campo.val("");
  campo.toggleClass("campo-desativado"); 
  $("#contador-palavras").text("0");
  $("#contador-caracteres").text("0");
  $("#tempo-digitacao").text(tempoInicial);
  inicializaCronometro();
}
$("#botao-reiniciar").click(reiniciaJogo);

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <div class="container">
    <h1>Alura Typer</h1>
    <p class="frase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <ul class="informacoes">
      <li><span id="tamanho-frase">19</span> palavras</li>
      <li><span id="tempo-digitacao">15</span> segundos</li>
    </ul>

    <textarea id="campo-digitacao" rows="8" cols="80"></textarea>
    <button id="botao-reiniciar">Reiniciar Jogo</button>
    <ul>
      <li><span id="contador-caracteres">0</span> Caracteres</li>
      <li><span id="contador-palavras">0</span> Palavras</li>
    </ul>
  </div>

    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

CSS:

#campo-digitacao {
    font-size: 20px;
    height: 130px;
}

.frase {
    font-size: 20px;
    text-align: justify;
}

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

Obrigado!

9 respostas
por Rodrigo D'Amorim Lima Siqueira
| 90.5k xp | 45 posts
Desenvolvedor

Duas coisas, primeiro, tem um 'one' que deveria ser 'on' alí

campo.one("focus", function() {

Segundo, tenta usar 

$("#campo-digitacao").toggleClass("campo-desativado")
por Gabriel Kyomen
| 163.2k xp | 84 posts
FullStack Developer

Infelizmente aquele 'one' não pode ser removido pois faz parte das atividades do curso, e o toggleClass desse jeito também não quis funcionar... porém, o erro ocorre só no Chrome. O instrutor ensinou isso pra não ser necessário escrever addClass e depois ficar tendo que lembrar se é hora de colocar removeClass ou outro addClass, e, como são só essas duas vezes que são usados no código, creio que não tem problema deixar com add e remove. De qualquer forma, obrigado!

por Rodrigo D'Amorim Lima Siqueira
| 90.5k xp | 45 posts
Desenvolvedor

Ah cara, pela descrição do seu problema e seu objetivo, a solução era usar on, mas se a atividade exige one...

A questão é, o one só executa uma vez, depois o evento é removido, é o comportamento dele esse mesmo.

por Williams P Marinho
| 183.3k xp | 12 posts

Gabriel, no teu css não está definida a classe campo-digitacao e sim um css para o id campo-digitacao.

está

#campo-digitacao {
    font-size: 20px;
    height: 130px;
}

deveria ser

.campo-digitacao {
    font-size: 20px;
    height: 130px;
}

Acho que é por isso que não está funcionando o toggleClass

por Rodrigo D'Amorim Lima Siqueira
| 90.5k xp | 45 posts
Desenvolvedor

Mas ele tá fazendo toggle em campo-desativado.

A resposta final do por quê só tá executando uma vez, é devido ao uso do “one”.

por Gabriel Kyomen
| 163.2k xp | 84 posts
FullStack Developer

Williams, obrigado pela resposta, mas infelizmente não é esse o problema. trocando o seletor de id '#' pelo seletor de classe '.', a aplicação perde o estilo proposto, a textarea fica só com uma linha.

por Lucas Paz
| 109.5k xp | 3 posts
Full Stack Developer

Tente alterar as duas functions por isso:

function inicializaCronometro() {
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function() {
        $("#botao-reiniciar").attr("disabled",true);
        var cronometroID = setInterval(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
                    if (tempoRestante < 1) {
                        campo.attr("disabled", true);
                        $("#botao-reiniciar").attr("disabled", false);
                        clearInterval(cronometroID);
                        // Substitui função .toggleClass()
                        if( campo.hasClass('campo-desativado') ) {
                            campo.removeClass('campo-desativado');
                        } else {
                            campo.addClass('campo-desativado');
                        }
                    }
        }, 1000);
    });
}

function reiniciaJogo() {
    campo.attr("disabled", false);
    campo.val("");

    // Substitui função .toggleClass()
    if( campo.hasClass('campo-desativado') ) {
        campo.removeClass('campo-desativado');
    } else {
        campo.addClass('campo-desativado');
    }

    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
}
por Cassio Felipe
| 233.4k xp | 42 posts

Experimenta pegar o js do instrutor substituir o seu do inicio do capitulo e colcoar os toogle depois, isso funcionou para mim, então era algum probleminha que eu passei batido no meu codigo.

por Cristiano
| 265.2k xp | 54 posts
Software Engineer

Cara, se liga nesse post aqui , acho que o mesmo erro que ele cometeu, eu cometi e pelo que vi a chamada da função reiniciaJogo está duplicada. https://cursos.alura.com.br/forum/topico-toggleclass-nao-funciona-45983