如何根据变量jquery的数量检查for循环

Question

我想根据给定的用户评分标记星级评分。 例如：-我给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>';
}

在上面的代码中，“ rating”变量包含三星级，因为在代码“ checked”类中是静态编写的。 我的要求是for循环中的“ res_review.length”包含4星级。 因此，我希望4个span标签能够动态包含“ checked”类。

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元素。 如果当前星星的索引小于评论，则显示突出显示的星星，否则仅显示其轮廓。 尝试这个：

 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('')); }); 

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

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

Answer 3

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

@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>';
    }
}