How to Convert Numerical Ratings into Star Displays Using jQuery and CSS?

Transforming Numerical Ratings into Star Display Using jQuery and CSS

This question aims to convert a given numerical rating into a star rating system with a maximum of 5 stars. Leveraging the power of jQuery, CSS, and images, we can achieve this visual representation efficiently.

CSS Implementation

Create two CSS styles for the star elements:

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

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

These styles define block-level spans with an initial width and height for displaying the stars.

Image Resource

Obtain a suitable star image with a width representing the maximum rating (in this case, 5). Ensure it features two distinct sections: the background stars and the actual star ratings.

jQuery Implementation

Define a jQuery plugin called stars:

$.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></span>').width(size);
        $(this).html($span);
    });
}

This plugin iterates through the selected elements, extracts the numerical rating, and generates a span element with a width proportionate to the desired rating. It replaces the original numerical value with the star representation.

HTML Usage

In your HTML, apply the stars class to the elements containing the numerical ratings.

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

Usage

Call the stars plugin after the DOM is ready:

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

Output

The result will be a visual representation of the numerical ratings using the provided star image. By adjusting the rating value, you can dynamically update the star display.

Additional Notes

For accessibility purposes, it's advisable to include the numerical value as hidden text or via alternative means, ensuring accessibility for users with CSS disabled.

The above is the detailed content of How to Convert Numerical Ratings into Star Displays Using jQuery and CSS?. For more information, please follow other related articles on the PHP Chinese website!