removeClass and addClass optimization in a scoring system

Question

I have scoring system where I want to change icon color by changing CSS classes.

How can I optimize this jQuery? After testing, I found this the only alternative, but I trust there is a more simplified method.

// Count scores
$('#bodyScore').text((90 / myarray.length) * bodyScore + '/90'); 

// Change icon color
var bodyPercent  = bodyScore / myarray.length;
var successRatio = 0.9;
var warningRatio = 0.5;

if (bodyPercent >= successRatio) {
    $(".bkf").removeClass("label-success");
    $(".bkf").removeClass("label-warning");
    $(".bkf").removeClass("label-important");
    $(".bkf").addClass("label-success");
}

else if (bodyPercent >= warningRatio) {
    $(".bkf").removeClass("label-success");
    $(".bkf").removeClass("label-warning");
    $(".bkf").removeClass("label-important");
    $(".bkf").addClass("label-warning");
}

else {
    $(".bkf").removeClass("label-success");
    $(".bkf").removeClass("label-warning");
    $(".bkf").removeClass("label-important");
    $(".bkf").addClass("label-important");
}

Answer 1

Both the removeClass and addClass methods will accept a space-separated list of class names to add/remove, and both can be chained.

You can cache the selector so you don't have to repeatedly search the DOM.

And since you remove the same three classes in each branch of execution, you can move that outside of the if/else if/else:

var bkf = $(".bkf").removeClass("label-success label-warning label-important");
if (bodyPercent >= successRatio) {
    bkf.addClass("label-success");
}
else if (bodyPercent >= warningRatio) {
    bkf.addClass("label-warning");
}
else {
    bkf.addClass("label-important");
}

Answer 2

You can change it to

 if (bodyPercent >= successRatio) {
        $(".bkf").removeClass("label-success label-warning label-important")
           .addClass('label-success');

    }

Do the same thing for others too.

Answer 3

You can specify all classes together and do chaining to call the add class like this

   if (bodyPercent >= successRatio) {
        $(".bkf").removeClass("label-success label-warning label-important")  
                     .addClass("label-success");
    }

    else if (bodyPercent >= warningRatio) {
        $(".bkf").removeClass("label-success label-warning label-important")
                                          .addClass("label-warning");
    }

    else {
        $(".bkf").removeClass("label-success label-warning label-important")
            .addClass("label-important");
    }

The removeClass method parameter (classname) takes one or more space-separated classes to be removed from the class attribute of each matched element.

Answer 4

You don't have to repeat your removeClass code 3 times, and you can combine the remove's into one statement:

$(".bkf").removeClass("label-success label-warning label-important");

if (bodyPercent >= successRatio) {
     $(".bkf").addClass("label-success");
}

else if (bodyPercent >= warningRatio) {
     $(".bkf").addClass("label-warning");
}

else {
     $(".bkf").addClass("label-important");
}