Publicado em 27 de mar.

JQUERY ATTR

#perguntas-e-respostas-rapidas #attr #clicar #html #jquery

Sei muito pouco sobre jquery e estou fazendo uns testes para mudar o nome da classe de um elemento html.

Essa classe gera uma setinha para baixo por si própria. Ela é uma classe do font awesome.

Ao clicar eu até consegui fazer a seta mudar para cima com o ATTR do jquery, mas não estou conseguindo fazer a seta voltar ao normal ao clicar novamente.

Abaixo segue o código:

<!DOCTYPE html>

	<html lang="pt-br">

	    <head>

	        <meta charset="UTF-8">

	        <title></title>

	        <script src="jquery.min.js"></script>        

	        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

	        <script>

	            $(document).ready(function(){

	                   $(".clicar").click(function(){

	                   $(".seta").attr('class', 'fa fa-sort-asc');  

	                   });

	            });

	            $(document).ready(function(){

	                   $(".clicar").click(function(){

	                   $(".seta").attr('class', 'fa fa-sort-desc');  

	                   });

	            });

	        </script>

	        

	    </head>

	    <body>

	        

	        <h4 class="clicar">

	            clicar <i class="fa fa-sort-desc seta"></i>

	        </h4>

	        

	    </body>

	</html>

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Eziquiel· 27 de mar.

Use esta instrução dentro do seu <script>. 

	Não precisa repetir este código. Use apenas isso.

$(document).ready(function(){
 $(".clicar").click(function(){
 $(".seta").toggleClass('fa fa-sort-asc').toggleClass('fa fa-sort-desc');
 });
});

Eziquiel· 27 de mar.

A função "toggleClass" inverte entre adicionar ou remover a classe que você indicar. Exemplo:

$(elemento).toggleClass('main');

	Ao chamar essa função, se o "elemento" conter a classe "main", então esta classe será removida;

	Caso o "elemento" não contenha a classe "main", então esta classe será adicionada.

$(".seta").toggleClass('fa fa-sort-asc').toggleClass('fa fa-sort-desc');

	Aqui eu chamo a inversão de duas classes seguidas. Como o elemento em questão já inicia com a classe 'fa fa-sort-desc', então a função irá remover esta classe. E como não existe a classe 'fa fa-sort-asc', então a função irá adicionar esta classe. Na próximo vez que este comando for chamado a função toggleClass fará o inverso.

	 

	Compreendido?

lucashenrique175· 27 de mar.

Olá Eziquiel,

Muito obrigado! Seu código funcionou perfeitamente. Mais uma vez, muito obrigado!

Entendi perfeitamente!