jQuery と CSS を使用して数値を星の評価に変換するにはどうすればよいですか?

jQuery と CSS を使用して任意の数値を星評価表示に変換する

数値から星評価表示を作成すると、視覚化を強化できます。 Web サイトやアプリケーションのレビュー スコアや製品の評価。このタスクは、jQuery と CSS を組み合わせて使用​​すると簡素化できます。

jQuery と CSS の実装

この解決策には、単一の CSS イメージと自動生成されたスパンの利用が含まれます。要素:

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

画像

注:stars.png 画像を独自のサーバーにコピーし、それを使ってください

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></span>').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

HTML

<span></span>

使用方法

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

カスタマイズ

へ星を半分または 4 分の 1 つ星サイズに制限するには、JavaScript コードを次のように変更します:

• 半分星: val = Math.round(val * 2) / 2;
• 四分星: val = Math.round(val * 4) / 4;

説明

スクリプトは、星のスプライトの背景画像を使用してネストされたスパン要素を作成します。外側のスパンには灰色の星が含まれ、内側のスパンには黄色の星が含まれます。内側のスパンの幅を調整すると、黄色の星が適切な数の灰色の星を表示します。

アクセシビリティに関する考慮事項

内部の数値を非表示にすることでアクセシビリティを向上させることができますtext-indent: -9999px; を使用して内部スパンを支援技術で利用できるようにします。

以上がjQuery と CSS を使用して数値を星の評価に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。