So überprüfen Sie den Bereich für die Schleife nach Anzahl der Variablen jquery

Question

Ich möchte die Anzahl der Sterne nach Nutzer-Bewertung gegeben markiert. Zum Beispiel: - I 4 Bewertung, dann 4 Sterne sollte farbig und der letzte Stern nicht farbig sein. Ich benutze <span> Tag dafür. Hier ist mein Code: -

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

In dem obigen Code, das ‚Bewertung‘ Variable enthält die 3 Sterne, weil in dem Code ‚überprüft‘ Klasse ist statisch geschrieben. Was meine Anforderung ist die "res_review.length" in For-Schleife enthält 4 Sterne. Also möchte ich, dass 4 Span-Tags die Klasse "checked" dynamisch enthalten.

Answer 1

Sie können es wie

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

Verwenden eine innere Schleife, die wiederholt span Elemente in HTML zu bauen. Wenn der Index des aktuellen Sterns kleiner als der Bericht ist, zeigen Sie den hervorgehobenen Stern an, ansonsten nur einen Umriss. Versuchen Sie folgendes:

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

Sie Laravel for-Schleife in Blade-Datei und Anzeige Stern wie diese in diesem Beispiel

@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 

verwenden können, erhalte ich insgesamt 5 Bewertung Stern ist und $ Bewertung wird mitnennung Für jquery, können Sie das tun

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