Comment puis-je générer dynamiquement des notes par étoiles à partir d'une saisie numérique à l'aide de jQuery et CSS ?

Transformer des nombres en affichages de notes par étoiles à l'aide de jQuery et CSS

Dans le domaine de l'affichage des notes, transformer des valeurs numériques en notes par étoiles est un défi commun. Comment pouvons-nous générer dynamiquement des notes par étoiles basées sur une saisie numérique à l'aide de jQuery et CSS ?

Solution :

Voici une solution innovante qui exploite une seule image et 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;

Copier après la connexion

}

span.stars span {

background-position: 0 0;

}

Image :

Une seule image (stars.png) avec des étoiles jaunes en haut et des étoiles grises en haut en bas.

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

Copier après la connexion