Question

我有以下代码，我已经尝试了一些方法，但是它破坏了整个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>

Answer 1

这是您的问题的有效摘要。

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

Answer 2

无需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>

根据评级更改星色

2 个答案: