Change object class <i> within <a> tag

Asked

Viewed 43 times

0

With the following code:

<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>

I tested it like this, but it didn’t work:

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

How to change class fa fa-bolt for fa fa-spinner when the user clicks on the link?

html jquery css

2 answers

1


Just access the element son of the event target using the children and use the methods addClass and removeClass to exchange 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: I don’t know if you noticed, but I added the class fa-fw to HTML. This is to make both icons the same size, avoiding an unpleasant transition in the user’s eyes. ;)

Edit:

If you, for any reason, need to define the Listener of event in HTML, you can do so:

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

Note, however, that defining events directly in HTML is not a good practice. Always prefer to define them directly in the Javascript code, as exemplified in the first code snippet of this answer.

  • hi buddy, need to be called the function onclick="importar_txt_cnes()" because in it I will send parametres in each boot

  • I tested your code inside the function I created and it doesn’t work. I need to modify something?

  • I changed the question by showing how I’m using the code you gave me

  • 1

    I edited the answer adding more details...

1

Send the this as a parameter for the function in onclick. The this represents the element that called the function, ie if you have more than one button, will be changed the button icon clicked.

You can just change the name "Bolt" to "spinner" with 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>

With jQuery you can use the method .toggleClass() adding the new class without removing the other, because the prevails is the last class of the attribute 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>

Browser other questions tagged html jquery css

You are not signed in. Login or sign up in order to post.