4
\$\begingroup\$

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");
}
\$\endgroup\$
  • \$\begingroup\$ Remove all classes first, then just add the one class in each statement. \$\endgroup\$ – ayyp Jun 13 '12 at 13:38
8
\$\begingroup\$

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");
}
| improve this answer | |
\$\endgroup\$
0
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$
0
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$
0
\$\begingroup\$

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");
}
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.