Wie kann ich mit jQuery und CSS Zahlen in Sternebewertungen umwandeln?

Verwandeln Sie eine beliebige Zahl in eine Sternebewertungsanzeige mit jQuery und CSS

Das Erstellen einer Sternebewertungsanzeige aus einem numerischen Wert kann die Visualisierung verbessern Überprüfen Sie Ergebnisse und Produktbewertungen auf Websites und Anwendungen. Diese Aufgabe kann durch eine Kombination aus jQuery und CSS vereinfacht werden.

jQuery- und CSS-Implementierung

Die Lösung beinhaltet die Verwendung eines einzelnen CSS-Bilds und eines automatisch generierten Spans Elemente:

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

Bild

Hinweis: Kopieren Sie das Bild „stars.png“ auf Ihren eigenen Server und Benutze es lokal.

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>

Nutzung

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

Anpassung

An Beschränken Sie Sterne auf halbe oder viertel Sterngrößen und ändern Sie den JavaScript-Code wie folgt:

• Halbe Sterne: val = Math.round(val * 2) / 2;
• Viertelsterne: val = Math.round(val * 4) / 4;

Erklärung

Das Skript erstellt verschachtelte Span-Elemente mit Hintergrundbildern eines Sternensprites. Der äußere Bereich enthält graue Sterne, während der innere Bereich gelbe Sterne enthält. Durch Anpassen der Breite des inneren Bereichs zeigen die gelben Sterne die entsprechende Anzahl grauer Sterne an.

Überlegungen zur Barrierefreiheit

Die Barrierefreiheit kann verbessert werden, indem der numerische Wert darin ausgeblendet wird die innere Spanne mit text-indent: -9999px;, um sicherzustellen, dass sie für unterstützende Technologien verfügbar ist.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery und CSS Zahlen in Sternebewertungen umwandeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!