jquery - 根据评级更改星色

我有以下代码，我已经尝试了一些方法，但是它破坏了整个javascript代码。我想做的就是，如果评级低于3，则更改<i>元素的背景颜色。我正在使用以下代码生成星级，但我一直在努力改变颜色。

$.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>

最佳答案

无需Javascript，CSS即可解救：

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>

关于jquery - 根据评级更改星色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54905390/