0

Com o seguinte código:

<a class="btn btn-primary botao" style="background-color:#009999" onclick="importar_txt_cnes()"><i class="fa fa-bolt" style="font-size:1em;"></i> Importar</a>

Testei assim, mas não funcionou:

function importar_txt_cnes(){
    $(this).children('i').removeClass('fa-bolt').addClass('fa-spinner');
}

Como fazer pra trocar a classe fa fa-bolt para fa fa-spinner quando o usuário clicar no link?

2 Respostas 2

1

Basta acessar o elemento filho do alvo do evento usando o método children e usar os métodos addClass e removeClass para trocar as classes:

$('.botao').on('click', function() {
  $(this).children('i').removeClass('fa-bolt').addClass('fa-spinner');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<a class="btn btn-primary botao">
  <i class="fa fa-fw fa-bolt"></i> Importar
</a>

PS: Não sei se você percebeu, mas adicionei a classe fa-fw ao HTML. Isso é para fazer com que ambos os ícones tenham o mesmo tamanho, evitando uma transição desagradável aos olhos do usuário. ;)

Edit:

Se você, por alguma razão, precisar definir o listener de evento no HTML, você pode fazer assim:

function importar_txt_cnes(){
  $('.botao > i').removeClass('fa-bolt').addClass('fa-spinner');
}

Note, no entanto, que definir os eventos diretamente no HTML não é uma boa prática. Sempre prefira defini-los diretamente no código JavaScript, conforme exemplificado no primeiro trecho de código dessa resposta.

4
  • oi amigo, preciso que seja chamada a função onclick="importar_txt_cnes()" pois nela irei enviar parametros em cada botao 11/07/2019 às 1:43
  • testei seu código dentro da funcao que criei e nao funciona. preciso modificar algo? 11/07/2019 às 1:43
  • alterei a pergunta mostrando como estou usando o codigo que voce me passou 11/07/2019 às 1:45
  • 1
    Editei a resposta adicionando mais detalhes... 11/07/2019 às 1:52
1

Envie o this como parâmetro para a função no onclick. O this representa o elemento que chamou a função, ou seja, caso você tenha mais de um botão, será alterado o ícone do botão clicado.

Pode apenas trocar o nome "bolt" por "spinner" com replace:

function importar_txt_cnes(e){
   e.firstChild.className = e.firstChild.className.replace('bolt' ,'spinner');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<a class="btn btn-primary botao" style="background-color:#009999" onclick="importar_txt_cnes(this)"><i class="fa fa-bolt" style="font-size:1em;"></i> Importar</a>
<a class="btn btn-primary botao" style="background-color:#009999" onclick="importar_txt_cnes(this)"><i class="fa fa-bolt" style="font-size:1em;"></i> Importar</a>

Com jQuery pode usar o método .toggleClass() adicionando a nova classe sem remover a outra, porque o prevalece é a última classe do atributo class:

function importar_txt_cnes(e){
   $('i', e).toggleClass('fa-spinner', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<a class="btn btn-primary botao" style="background-color:#009999" onclick="importar_txt_cnes(this)"><i class="fa fa-bolt" style="font-size:1em;"></i> Importar</a>
<a class="btn btn-primary botao" style="background-color:#009999" onclick="importar_txt_cnes(this)"><i class="fa fa-bolt" style="font-size:1em;"></i> Importar</a>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .