Comment puis-je transformer des chiffres en notes par étoiles à l'aide de jQuery et CSS ?

Transformez n'importe quel nombre en un affichage de notes par étoiles avec jQuery et CSS

La création d'un affichage de notes par étoiles à partir d'une valeur numérique peut améliorer la visualisation de examiner les scores et les évaluations des produits sur les sites Web et les applications. Cette tâche peut être simplifiée en utilisant une combinaison de jQuery et CSS.

Implémentation de jQuery et CSS

La solution consiste à utiliser une seule image CSS et un span généré automatiquement éléments :

CSS

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}
span.stars span {
    background-position: 0 0;
}

Image

Remarque : copiez l'image stars.png sur votre propre serveur et utilise-le localement.

jQuery

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value and ensure it is within 0-5 range
        var val = parseFloat($(this).html());
        val = Math.max(0, (Math.min(5, val)));
        // Calculate star width and create a span holder
        var size = val * 16;
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

HTML

<span>

Utilisation

$(function() {
    $('span.stars').stars();
});

Personnalisation

À limitez les étoiles aux tailles demi ou quart d'étoile, modifiez le code JavaScript comme suit :

• Demi-étoiles : val = Math.round(val * 2) / 2;
• Quart d'étoiles : val = Math.round(val * 4) / 4;

Explication

Le script crée des éléments span imbriqués avec des images d'arrière-plan d'un sprite étoilé. La travée extérieure contient des étoiles grises, tandis que la travée intérieure contient des étoiles jaunes. En ajustant la largeur de la travée intérieure, les étoiles jaunes révèlent le nombre approprié d'étoiles grises.

Considérations sur l'accessibilité

L'accessibilité peut être améliorée en masquant la valeur numérique à l'intérieur la travée intérieure en utilisant text-indent: -9999px;, garantissant qu'elle est disponible pour les technologies d'assistance.

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!