Question

158

Jquery - Change span text color based on numeric value

rated 0 times [ 159] [ 1] / answers: 1 / hits: 24223 / 9 Years ago, sat, august 22, 2015, 12:00:00

I'm trying to build a review system in WP with Advanced Custom Fields, but I can't solve this. I want to change the color of a score based on the number.
For example: if the writer puts 0-40 as score it has to be changed to red; if the writer puts 40-60 it has to be changed to orange; if the writter puts 60-80 it has to be green...

HTML:

<div class=r-summary>

   <span id=score>

      <?php the_field('score'); ?> */HERE GOES THE NUMBER WITH THE SCORE

   </span>

 </div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

georgeh

Add To Favorites

Follow

Total Points: 193

Total Questions: 103

Total Answers: 111

Location: United States Minor Outlying Island

Member since Sat, May 28, 2022

2 Years ago

answered 9 Years ago janettejordynm · Accepted Answer

Fiddle: http://jsfiddle.net/5zdemo3j/

(change the score in the HTML section and Run to see changes)

$(function () {

    // Score Color

    var score = parseInt($('#score').text().trim());

    var color = 'red';

    if (!isNaN(score)) {

        if (score >= 40) {

            color = 'orange';

        }

        if (score >= 60) {

            color = 'green';

        }

        $('#score').css('color', color);

    }

});