Comment convertir des notes numériques en affichages d'étoiles à l'aide de jQuery et CSS ?

Transformer les notes numériques en affichage par étoiles à l'aide de jQuery et CSS

Cette question vise à convertir une note numérique donnée en un système de notation par étoiles avec un maximum de 5 étoiles. En tirant parti de la puissance de jQuery, CSS et des images, nous pouvons réaliser cette représentation visuelle efficacement.

Implémentation CSS

Créez deux styles CSS pour les éléments étoiles :

span.stars, span.stars span {
    display: block;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

Ces styles définissent des étendues au niveau des blocs avec une largeur et une hauteur initiales pour afficher les étoiles.

Image Ressource

Obtenez une image d'étoile appropriée avec une largeur représentant la note maximale (dans ce cas, 5). Assurez-vous qu'il comporte deux sections distinctes : les étoiles d'arrière-plan et les notes réelles.

Implémentation de jQuery

Définissez un plugin jQuery appelé étoiles :

$.fn.stars = function() {
    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);
    });
}

Ce plugin parcourt les éléments sélectionnés, extrait la note numérique et génère un élément de portée avec une largeur proportionnelle à la note souhaitée. Il remplace la valeur numérique d'origine par la représentation en étoiles.

Utilisation HTML

Dans votre code HTML, appliquez la classe étoiles aux éléments contenant les notes numériques.

<span class="stars">3.8</span>

Utilisation

Appelez le plugin stars une fois le DOM terminé prêt :

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

Sortie

Le résultat sera une représentation visuelle des notes numériques en utilisant l'image étoile fournie. En ajustant la valeur de note, vous pouvez mettre à jour dynamiquement l'affichage des étoiles.

Notes supplémentaires

À des fins d'accessibilité, il est conseillé d'inclure la valeur numérique sous forme de texte masqué ou via d'autres moyens, garantissant l'accessibilité pour utilisateurs avec CSS désactivé.

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!