Wie konvertiere ich numerische Bewertungen mit jQuery und CSS in Sternanzeigen?

Numerische Bewertungen mit jQuery und CSS in Sternanzeige umwandeln

Diese Frage zielt darauf ab, eine gegebene numerische Bewertung in ein Sternebewertungssystem mit maximal 5 Sternen umzuwandeln. Durch die Nutzung der Leistungsfähigkeit von jQuery, CSS und Bildern können wir diese visuelle Darstellung effizient erreichen.

CSS-Implementierung

Erstellen Sie zwei CSS-Stile für die Sternelemente:

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

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

Diese Stile definieren Spannen auf Blockebene mit einer anfänglichen Breite und Höhe für die Anzeige der Sterne.

Bild Ressource

Besorgen Sie sich ein geeignetes Sternbild mit einer Breite, die der Höchstbewertung entspricht (in diesem Fall 5). Stellen Sie sicher, dass es zwei unterschiedliche Abschnitte enthält: die Hintergrundsterne und die tatsächlichen Sternebewertungen.

jQuery-Implementierung

Definieren Sie ein jQuery-Plugin namens Sterne:

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

Dieses Plugin iteriert durch die ausgewählten Elemente, extrahiert die numerische Bewertung und generiert ein Spannenelement mit einer Breite, die proportional zur gewünschten Bewertung ist. Es ersetzt den ursprünglichen numerischen Wert durch die Sterndarstellung.

HTML-Verwendung

Wenden Sie in Ihrem HTML die Sterneklasse auf die Elemente an, die die numerischen Bewertungen enthalten.

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

Verwendung

Rufen Sie das Stars-Plugin nach dem DOM auf fertig:

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

Ausgabe

Das Ergebnis ist eine visuelle Darstellung der numerischen Bewertungen unter Verwendung des bereitgestellten Sternbildes. Durch Anpassen des Bewertungswerts können Sie die Sternanzeige dynamisch aktualisieren.

Zusätzliche Hinweise

Aus Gründen der Barrierefreiheit ist es ratsam, den numerischen Wert als versteckten Text oder auf alternative Weise einzufügen, um die Barrierefreiheit sicherzustellen Benutzer mit deaktiviertem CSS.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich numerische Bewertungen mit jQuery und CSS in Sternanzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!