How to change an element's class - Awesome Font

Navigation
3

I have an Awesome Font icon in which I am trying to make the element clickable, change the icon from fa fa-plus to fa fa-minus and clicking again, the icon returns to fa fa-plus . How can I do this?

Here is the code for what I have so far: 

$("#fa").click(function(){
    var linhaClicada = $(this);

    if (linhaClicada.removeClass("fa fa-plus")) {
        linhaClicada.addClass("fa fa-minus");
        //$("#excluir").hide();
    }
    else if(linhaClicada.removeClass("fa fa-minus")){
        linhaClicada.addClass("fa fa-plus");
    }
});
  

Note: I was able to get it to change from fa fa-plus to fa fa-minus , but I can not get it back to fa fa-plus when I click back.

    
asked by anonymous 17.11.2015 / 01:17

1 answer

7

You can do this as follows: 

$('.minhaClass').click(function(){
    $(this).find('i').toggleClass('fa-minus fa-plus')
});
.minhaClass{cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><linkrel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">

<span class="minhaClass"><i class="fa fa-minus"></i> Clica-me!</span>
    
17.11.2015 / 01:36
Deserialize JSON How to create an animated ProgressBar to report the force of the password?