CODEWITHSUNDEEP
jquery
JMKelley
JMKelley

Reputation: 658

Change Star Colour Depending on Rating

I have the following code, I've tried a few things but it breaks the entire javascript code. All I'm trying to do is change the background color of <i> element if the rating is below 3. I'm using the below code to generate the star ratings but I'm struggling changing the colour.

$.fn.stars = function() {
  return $(this).each(function() {
    var rating = $(this).data("rating");
    var numStars = $(this).data("numStars");
    var fullStar = new Array(Math.floor(rating + 1)).join('<i class="material-icons">star</i>');
    var halfStar = ((rating % 1) !== 0) ? '<i class="material-icons">star_half</i>' : '';
    var noStar = new Array(Math.floor(numStars + 1 - rating)).join('<i class="material-icons">star_border</i>');
    $(this).html(fullStar + halfStar + noStar);
  });
}

$('.stars').stars();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="stars" data-rating="4" data-num-stars="5"></span>

Upvotes: 1

Views: 847

Answers (2)

vzwick
vzwick

Reputation: 11044

No need for Javascript, CSS to the rescue:

span.stars[data-rating="0"] > i.material-icons,
span.stars[data-rating="0.5"] > i.material-icons,
span.stars[data-rating="1"] > i.material-icons,
span.stars[data-rating="1.5"] > i.material-icons,
span.stars[data-rating="2"] > i.material-icons,
span.stars[data-rating="2.5"] > i.material-icons {
    background-color: red;
}


$.fn.stars = function() {
  return $(this).each(function() {
    var rating = $(this).data("rating");
    var numStars = $(this).data("numStars");
    var fullStar = new Array(Math.floor(rating + 1)).join('<i class="material-icons">★</i>');
    var halfStar = ((rating % 1) !== 0) ? '<i class="material-icons">½</i>' : ''; // UTF8 half stars aren't too well supported, apparently :(
    var noStar = new Array(Math.floor(numStars + 1 - rating)).join('<i class="material-icons">☆</i>');
    $(this).html(fullStar + halfStar + noStar);
  });
}

$('.stars').stars();
span.stars[data-rating="0"] > i.material-icons,
span.stars[data-rating="0.5"] > i.material-icons,
span.stars[data-rating="1"] > i.material-icons,
span.stars[data-rating="1.5"] > i.material-icons,
span.stars[data-rating="2"] > i.material-icons,
span.stars[data-rating="2.5"] > i.material-icons {
    background-color: red;
}

/* ignore this part, it's just here to make the snippet output look pretty */
span.stars { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="stars" data-rating="0" data-num-stars="5"></span>
<span class="stars" data-rating="0.5" data-num-stars="5"></span>
<span class="stars" data-rating="1" data-num-stars="5"></span>
<span class="stars" data-rating="1.5" data-num-stars="5"></span>
<span class="stars" data-rating="2" data-num-stars="5"></span>
<span class="stars" data-rating="2.5" data-num-stars="5"></span>
<span class="stars" data-rating="3" data-num-stars="5"></span>
<span class="stars" data-rating="3.5" data-num-stars="5"></span>
<span class="stars" data-rating="4" data-num-stars="5"></span>
<span class="stars" data-rating="4.5" data-num-stars="5"></span>
<span class="stars" data-rating="5" data-num-stars="5"></span>

Upvotes: 2

muka.gergely
muka.gergely

Reputation: 8329

This is a working snippet for your question.

$.fn.stars = function() {
  return $(this).each(function() {
    var rating = $(this).data("rating");

    var numStars = $(this).data("numStars");

    var fullStar = new Array(Math.floor(rating + 1)).join('<i class="material-icons">star</i> ');

    var halfStar = ((rating % 1) !== 0) ? '<i class="material-icons">star_half</i> ' : '';

    var noStar = new Array(Math.floor(numStars + 1 - rating)).join('<i class="material-icons">star_border</i> ');

    $(this).html(fullStar + halfStar + noStar + "<br />");

    if ( rating < 4 ) {
      $(".material-icons").each(function() {
        $(this).css("background", "red");
      });
    }

  });

}

$('.stars').stars();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="stars" data-rating="1" data-num-stars="5"></span>
<span class="stars" data-rating="1.5" data-num-stars="5"></span>
<span class="stars" data-rating="2" data-num-stars="5"></span>
<span class="stars" data-rating="2.5" data-num-stars="5"></span>
<span class="stars" data-rating="3" data-num-stars="5"></span>
<span class="stars" data-rating="3.5" data-num-stars="5"></span>
<span class="stars" data-rating="4" data-num-stars="5"></span>
<span class="stars" data-rating="4.5" data-num-stars="5"></span>
<span class="stars" data-rating="5" data-num-stars="5"></span>

Upvotes: 1

Related Questions