変数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>'; 
} 

は、「格付け」変数は、3つ星の評価が含まれています。 forループの 'res_review.length'には4つ星評価が含まれています。だから私は、4つのスパンタグに 'チェックされた'クラスを動的に入れたい。

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の要素を構築するために内部ループを使用してください。現在の星のインデックスがレビューよりも小さい場合は、強調表示された星を表示し、そうでない場合はその概要のみを表示します。あなたはこの例では、この

@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 

のようなブレードファイルと表示スターにループのlaravelを使用することができます

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

、私は5が総評価の星と$で取得する：これを試してみてください評価が指定されています 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>'; 
    } 
}