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

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

評価システムを表示する場合、数値を星として表すと便利なことがよくあります。評価。これは、jQuery と CSS の助けを借りて実現できます。

課題:

4.8618164 のような数値が与えられた場合、タスクはそれを 4.8618164 スターに変換することです。最大 5 つ星の評価システム。評価は HTML 要素とスタイルを使用して表示する必要があります。

解決策:

星による評価の表示を作成するには、以下を利用します。要素:

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

画像:

小さな星を含む画像ファイルを使用しますアイコン。

jQuery:

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

HTML:

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

使用法:

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

結果:

上記のコードは、指定された数値に対応する星評価表示を作成します。黄色の星は記入された評価を示し、灰色の星は残りの評価を表します。

説明:

$.fn.stars 関数は数値を次のように変換します。星の評価。値に基づいて各星のスパンの幅を計算します。幅 80 ピクセルは完全な 5 つ星の評価を表し、値が小さいほど幅は比例して減少します。星を重ねることで、星による評価として数値を視覚的に表現します。

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