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> </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 algumaDiscussão (2)
Carregando comentários...