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

Zahlen in Sternbewertungen umwandeln: Eine vielseitige Lösung mit jQuery und CSS

Beim Entwerfen von Benutzeroberflächen ist es häufig erforderlich, numerische Bewertungen mithilfe von Sternen darzustellen. Trotz der Verfügbarkeit von jQuery-Plugins kann es eine anspruchsvolle Aufgabe sein, diese Plugins so anzupassen, dass sie Sternebewertungen basierend auf einer bestimmten Zahl anzeigen. In diesem Artikel wird eine robuste Lösung für diese Herausforderung untersucht, die eine Kombination aus CSS, jQuery und einem vordefinierten Bild verwendet.

CSS-Definition

Um die Sternebewertungen zu gestalten, gelten die folgenden CSS-Regeln eingesetzt:

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

In diesem CSS-Block fungiert der äußere Span (span.stars) als Container für die einzelnen Sterne (span.stars span). Beide Elemente werden als Elemente auf Blockebene festgelegt und erhalten ein Hintergrundbild von „stars.png“ mit spezifischen Offsets und Wiederholungsmustern.

Bildanforderungen

Die Bilddatei „stars.png“ dient als Sprite, das Bilder von gelben (gefüllten) und grauen (leeren) Sternen enthält. Dieses Bild muss auf dem Server des Benutzers gespeichert werden; Ein Hotlink zum bereitgestellten Bild wird nicht empfohlen.

jQuery-Implementierung

Die Kernfunktionalität wird mithilfe eines jQuery-Plugins namens $.fn.stars implementiert. Dieses Plugin durchläuft jedes Element mit den Klassensternen und wandelt seinen numerischen Inhalt in eine Sternebewertungsanzeige um. Die Berechnung ermittelt die Breite der gelben Sterne anhand der angegebenen Zahl und gewährleistet so eine proportionale Darstellung.

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<span></span>').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

HTML-Nutzung

Um dieses Plugin zu nutzen, wenden Sie einfach die Klassensterne auf die Spannen an Enthält die numerischen Bewertungen.

<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>

Aufruf

Lösen Sie das Plugin wie folgt aus Code:

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

Überlegungen zur Barrierefreiheit

Um die Barrierefreiheit zu gewährleisten, wird empfohlen, den ursprünglichen numerischen Wert im Span-Element beizubehalten, ihn jedoch mithilfe von text-indent: -9999px visuell auszublenden. Dieser Ansatz ermöglicht Screenreadern und Benutzern mit deaktiviertem CSS den Zugriff auf die zugrunde liegenden Daten.

Fazit

Diese Lösung wandelt mithilfe von jQuery und CSS numerische Bewertungen effizient in Sternebewertungen um und macht sie zu einem vielseitigen Tool für die Anzeige Bewertungen und Benutzerfeedback in verschiedenen Webanwendungen.

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