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

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

この質問は、指定された数値評価を最大 5 つ星の星評価システムに変換することを目的としています。 jQuery、CSS、画像の力を活用することで、この視覚的表現を効率的に実現できます。

CSS 実装

スター要素用に 2 つの CSS スタイルを作成します:

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

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

これらのスタイルは、星を表示するための初期の幅と高さを持つブロックレベルのスパンを定義します。

画像Resource

最大評価を表す幅 (この場合は 5) を持つ適切な星の画像を取得します。背景の星と実際の星の評価という 2 つの異なるセクションがあることを確認します。

jQuery の実装

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

このプラグインは以下を繰り返します。選択した要素を抽出し、数値評価を抽出し、目的の評価に比例した幅を持つスパン要素を生成します。元の数値をスター表現で置き換えます。

HTML の使用法

HTML で、数値評価を含む要素にスター クラスを適用します。

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

使用法

DOM が作成された後に、stars プラグインを呼び出します。準備完了:

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

出力

結果は、提供された星の画像を使用した数値評価の視覚的表現となります。評価値を調整することで、スターの表示を動的に更新できます。

追加メモ

アクセシビリティを目的として、隠しテキストとして数値を含めるか、代替手段を介して数値を含めることをお勧めします。 CSS が無効になっているユーザー。

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