removeClass and addClass optimization in a scoring system

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");
}

Answers


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");
}

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.


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.


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");
}

Need Your Help

How to properly disable a button in IE10?

javascript jquery html internet-explorer-10

Guys I have tested this code in Chrome, Firefox, IE 7 8 and 9. Only in IE10 it doesn't work.

Visual Studio 2010 toolbox "hides" controls

visual-studio-2010 silverlight controls toolbox

I have a somewhat strange issue with visual studio. Almost every time I create or open a Silverlight project in VS10 groups of controls "disappear" from the toolbox. What I've found out so far is the