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>
<pre class="brush:php;toolbar:false">display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;

}

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

}

HTML :

<br><span> <envergure class="étoiles">2.6545344</span><br><span><span class="stars">8</span><br>

Utilisation :

<br>$(fonction () {</p>
<pre class="brush:php;toolbar:false">$('span.stars').stars();

});

Sortie :

Cette solution utilise des sprites CSS pour combiner les deux jaunes et des étoiles grises en une seule image, nous permettant de contrôler la largeur des étoiles jaunes pour représenter l'image souhaitée.

Avantages :

• Simple et léger.
• Prend en charge les notes fractionnées par étoiles.
• Utilise CSS pour contrôler l'apparence des étoiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!