Considere uma página HTML, que utiliza a biblioteca JQuery, onde o clique sobre uma div, originalmente sem formatações, muda a cor do fundo para laranja, retornando para a situação original com um segundo clique. Considerando que a cor foi definida em uma classe CSS, a modificação deve ser efetuada através do método:
- A)append;
append insere conteúdo no final de um elemento, não altera classes nem estilo de fundo.
- B)css;
css altera propriedades de estilo diretamente, mas não alterna automaticamente uma classe CSS.
- C)hasClass;
hasClass apenas verifica se o elemento possui uma classe, sem adicionar ou remover nada.
- D)detach;
detach remove o elemento do DOM temporariamente, o que não resolve a troca de cor por clique.
- E)toggleClass.
toggleClass adiciona ou remove uma classe conforme o estado atual, exatamente o que a questão pede.
Gabarito: E
Quando a cor de fundo já foi definida em uma classe CSS, o jeito mais prático de alternar essa formatação no clique é adicionar e remover essa classe automaticamente. No jQuery, isso é feito com o método toggleClass(), que funciona como um botão: no primeiro clique ele coloca a classe, no segundo ele tira, e assim por diante. É exatamente o comportamento descrito no enunciado, sem precisar mexer direto no estilo linha a linha. Já o css() serve para alterar propriedades CSS diretamente, mas não faz essa alternância automática de classe. Como a questão diz que a cor foi definida em uma classe CSS, a solução correta é usar toggleClass().