Question

我想根据给定的用户评分标记星级评分。例如： - I 4等级，然后4星应该着色，最后一颗星不要着色。我正在使用<span>标记。这是我的代码： -

for(i=0; i<res_review.length; i++)
{
  var src = res_review[i];
  var rating = '<span class="fa fa-star checked"></span><span class="fa fa-star checked"></span><span class="fa fa-star checked"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>';
}

在上面的代码中，＆＃39;评分＆＃39;变量包含3星评级，因为在代码中已选中＆＃39;上课是静态写的。我的要求是＆＃39; res_review.length＆＃39; in for循环包含4星评级。所以我希望4个span标签包含＆＃39; checked＆＃39;动态上课。

Answer 1

你可以这样做

for(i=0; i<res_review.length; i++)
{
    var src = res_review[i];
    var rating = '';
    for(i=0; i<5; i++){ // out of five star
      if(i < src ){
        rating += '<span class="fa fa-star checked"></span>';
      }else{
        rating += '<span class="fa fa-star"></span>'
      }
    }
}

var src = 3;
var rating = '';
for(i=0; i<5; i++){ // out of five star
  if(i < src ){
    rating += '<span class="fa fa-star checked">*</span>';
  }else{
    rating += '<span class="fa fa-star">*</span>'
  }
}
document.querySelector("#stars").innerHTML = rating;

.checked{
   color:red;
}
.fa-star{
   font-size:40px;
}

<div id="stars">
</div>

Answer 2

使用内部循环在HTML中构建重复的span元素。如果当前星的索引小于评论，则显示突出显示的星，否则只显示它的轮廓。试试这个：

＆＃13;

var $reviews = $('#reviews');
[1, 4, 3, 2, 5].forEach(function(review) {
  var stars = [];
  for (var i = 0; i < 5; i++) {
    var className = i <= review - 1 ? 'fa-star' : 'fa-star-o';
    stars.push(`<span class="fa ${className}"></span>`);
  }
  $('<div />').appendTo($reviews).html(stars.join(''));
});

＆＃13;

.fa-star { color: gold; }
.fa-star-o { color: #EEE; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div id="reviews"></div>

＆＃13;

Answer 3

您可以在刀片文件中使用laravel for loop并像这样显示星号

@for ($i = 1; $i <= 5; $i++)
    @if($i<=$rating)
        <span class="fa fa-star checked"></span>
    @else
        <span class="fa fa-star"></span>
    @endif
@endfor

在这个例子中，我得到5是总评级明星，$ rating给出评级对于jquery，你可以这样做

var html = "";
for(var i=1;i<=5;i++){
    if(i <= rating){
        html.='<span class="fa fa-star checked"></span>';
    }else{
        html.='<span class="fa fa-star"></span>';
    }
}

如何根据变量jquery

3 个答案: