Wie kann ich mithilfe von jQuery und CSS dynamisch Sternebewertungen aus numerischen Eingaben generieren?

Umwandeln von Zahlen in Sternbewertungsanzeigen mit jQuery und CSS

Im Bereich der Anzeige von Bewertungen geht es darum, numerische Werte in Sternbewertungen umzuwandeln eine gemeinsame Herausforderung. Wie können wir mit jQuery und CSS dynamisch Sternebewertungen basierend auf numerischen Eingaben generieren?

Lösung:

Hier ist eine innovative Lösung, die ein einzelnes Bild nutzt und CSS:

CSS

<br>span.stars, span.stars span {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;

Nach dem Login kopieren

}

span.stars span {

background-position: 0 0;

}

Bild:

Ein einzelnes Bild (stars.png) mit gelben Sternen oben und graue Sterne oben unten.

jQuery:

<br>$.fn.stars = function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return $(this).each(function() {
    var val = parseFloat($(this).html());
    var size = Math.max(0, (Math.min(5, val))) * 16;
    var $span = $('<span />').width(size);
    $(this).html($span);
});

Nach dem Login kopieren