CODEWITHSUNDEEP
javascriptjqueryhtmlfont-awesomeaddclass
Richard Hamilton
Richard Hamilton

Reputation: 26444

Font-awesome class fa is not being added with JQuery

I have a button where I want the HTML and font-awesome icon to change on an odd number of clicks and revert back on an even number of clicks.

For example, I have a button named mute. If a user clicks on the button, I want the html to change to unmute and the font-awesome class to be replaced. If the user clicks on the button again I want the button to revert back to mute and so on.

This code should work and it does change the URL and the class. But it doesn't add the font-awesome initialization class fa.

When I inspect the element, I get this

<button id="mute" class="btn btn-primary fa-volume-off"> Mute</button>

With JQuery's addClass method you can add multiple classes by separating them with a space. Based on this, the element should be this

<button id="mute" class="btn btn-primary fa fa-volume-off"> Mute</button>

Here is my code

var clicks = 0;
    $("#mute").click(function() {
            clicks += 1;
            if (clicks % 2 === 1) {
                    $(this).html(" Un-mute");
                    $(this).addClass("fa fa-volume-up");
                    $(this).removeClass("fa fa-volume-off");
                    apiswf.rdio_setVolume(0);
            }
            else {
                $(this).html(" Mute");
                $(this).addClass("fa fa-volume-off");
                $(this).removeClass("fa fa-volume-up");
                apiswf.rdio_setVolume(100);
            }
    });

I do not understand why the fa class does not get added.

Upvotes: 4

Views: 2640

Answers (3)

Edward Manda
Edward Manda

Reputation: 579

Remove the class and then add the class. Swap the position of the two methods in both muting or unmuting

Upvotes: 1

JClaspill
JClaspill

Reputation: 1745

You are removeClass with fa in it after addClass

jsFiddle

var clicks = 0;
$("#mute").click(function() {
    clicks += 1;
    if (clicks % 2 === 1) {
        $(this).html(" Un-mute");
        $(this).removeClass("fa fa-volume-off");
        $(this).addClass("fa fa-volume-up");
        apiswf.rdio_setVolume(0);
    }
    else {
        $(this).html(" Mute");
        $(this).removeClass("fa fa-volume-up");
        $(this).addClass("fa fa-volume-off");
        apiswf.rdio_setVolume(100);
    }
});

Also, the removeClass both have fa even though you add fa every addClass... So should decide how you actually want to handle the fa.

Upvotes: 1

Moti Korets
Moti Korets

Reputation: 3748

The problem is you removing fa class with removeClass method immediately after adding it . Change to this :

$(this).removeClass("fa-volume-off");

Upvotes: 5

Related Questions