Publicado em 5 de abr.

Remover classe de todos os outro elementos, menos o clicado

Estou criando uma tabela com filtro na própria <thead> e preciso que quando eu clique em um <th> ele adicione uma classe css somente ao <i> dentro da <th> clicada.

	Essa parte está funcionando, o meu problema é que ao clicar em um <th> eu preciso que a mesma classe adicionada ao <i> dentro dela, seja retirada dos <i> que estão dentro das outras, e não estou conseguindo fazer isso

	 

	Código da tabela

<thead id="orderFilter">
 <tr>
 <th id="orderMusica">Música<i class="fa fa-caret-down fa-pull-right transition-all"></i></th>
 <th id="orderArtista">Artista/Banda<i class="fa fa-caret-down fa-pull-right ml-4 transition-all"></i></th>
 <th id="orderView" colspan="2">Views<i class="fa fa-caret-down fa-pull-right ml-4 transition-all"></i></th>
 <th>&nbsp;</th>
 </tr>
</thead>

	 

	Função jQuery

$(document).on("click", "#orderFilter th", function(){
 $(".fa-caret-down").removeClass('fa-rotate--180');
 $(this).children('.fa-caret-down').toggleClass('fa-rotate--180');
});

	Tentei do jeito que está na função, mas como a linha 

$(".fa-caret-down").removeClass('fa-rotate--180');

	está sempre removendo a classe, o .toggleClass() ao invés de ficar adicionando e tirando a classe, está sempre adicionando.

	 

	Se eu clico em outra <th> funciona perfeitamente, mas se clico na mesma a classe é removida, e adicionada logo em seguida e não faz alteração alguma

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Omar~· 6 de abr.

Não entendi o que era para remover nem o que era para adicionar.

Mas, em fim use isso é dó mudar o nome das class do jeito que quiser

Spoiler

<!DOCTYPE html>

<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.showtoggle').click(function () {
 $(this).parent().siblings().find('i.toggle').removeClass('fa-rotate--180');
 $(this).next('i.toggle').stop(true, false, true).toggleClass('fa-rotate--180');
 });
 });
 </script>
 </head>
 <body>
 <table>
 <thead id="orderFilter">
 <th id="orderMusica">
 <div class="showtoggle">Música</div>
 <i class="toggle"></i>
 </th>
 <th id="orderArtista">
 <div class="showtoggle">Artista</div>
 <i class="toggle"></i>
 </th>
 <th id="orderView">
 <div class="showtoggle">Artista</div>
 <i class="toggle"></i>
 </th>
 <th>&nbsp;</th>
 </thead>
 </table>
 </body>
</html>

Julio Cavallari· 6 de abr.

16 horas atrás, Omar~ disse:

Não entendi o que era para remover nem o que era para adicionar.

Mas, em fim use isso é dó mudar o nome das class do jeito que quiser

Mostrar conteúdo oculto

<!DOCTYPE html>

<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.showtoggle').click(function () {
 $(this).parent().siblings().find('i.toggle').removeClass('fa-rotate--180');
 $(this).next('i.toggle').stop(true, false, true).toggleClass('fa-rotate--180');
 });
 });
 </script>
 </head>
 <body>
 <table>
 <thead id="orderFilter">
 <th id="orderMusica">
 <div class="showtoggle">Música</div>
 <i class="toggle"></i>
 </th>
 <th id="orderArtista">
 <div class="showtoggle">Artista</div>
 <i class="toggle"></i>
 </th>
 <th id="orderView">
 <div class="showtoggle">Artista</div>
 <i class="toggle"></i>
 </th>
 <th>&nbsp;</th>
 </thead>
 </table>
 </body>
</html>

  

  

	Era pra somente alterar pro toggleClass() funcionar no elemento clicado e ser removido de todos os outros.  

	Muito obrigado pela ajuda, esse código funcionou do jeito que queria.