[解決済み] jQueryとCSSで数字を星の数だけ表示させる

質問

jqueryのプラグインを見ていて、数字（4.8618164など）を5段階中4.8618164の星にするためにそのプラグインをどのように適応させればいいのか疑問に思いました。基本的には、jQuery/JS/CSSを使用して5つ星の評価システムで満たされた星に数字＆lt;5を解釈する。

これは、すでに利用可能な番号から星の評価を表示/表示するだけで、新しい評価の投稿を受け付けないことに注意してください。

どのように解決するのですか？

小さな画像と、自動生成されたspan要素を1つだけ使用した解決策をご紹介します。

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

画像

_{(ソース ulmanen.fi )}

注意 する はありません。 上記の画像にホットリンクしてください。自分のサーバーにファイルをコピーして、そこから使ってください。

jQuery

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

星を半分か四分の一の大きさに制限したい場合は、以下の行を var size の行を追加します。

val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */

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

出力

_{(ソース ulmanen.fi )}

デモ

http://www.ulmanen.fi/stuff/stars.php

これはおそらくあなたのニーズに合うでしょう。この方法では、スリークォーターやその他の星の幅を計算する必要はなく、ただfloatを与えるだけで星が表示されます。

星がどのように表示されるかについて、少し説明する必要があるかもしれません。

このスクリプトでは、2 つのブロックレベルの span 要素を作成します。どちらのスパンも、最初は 80px * 16px のサイズと、背景画像 stars.png を取得します。スパンはネストされているので、スパンの構造は次のようになります。

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

外側のスパンには background-position の 0 -16px . これで、外側のスパンのグレーの星が見えるようになりました。外側のスパンの高さは16pxで repeat-x であるため、5個の灰色の星が表示されるだけです。

一方、内側のスパンには background-position の 0 0 で、黄色い星だけが見えるようになります。

これはもちろん、star_yellow.png と star_gray.png という2つの別々の画像ファイルで動作します。しかし、星の高さは固定されているので、簡単に1つの画像にまとめることができます。これは CSSスプライト技法 .

さて、スパンが入れ子になっているため、自動的に重なって表示されます。デフォルトでは、両方のスパンの幅が80pxのとき、黄色の星は灰色の星を完全に隠してしまいます。

しかし、内側のスパンの幅を調整すると、黄色い星の幅が小さくなり、グレーの星が見えてきます。

アクセシビリティの観点からは、floatの数字を内側のスパンの中に残し、それを text-indent: -9999px で隠し、CSS をオフにしている人が少なくとも星の代わりに浮動小数点数を見ることができるようにした方が賢明でしょう。

これで少しは理解できたでしょうか。

2010年10月22日更新

さらにコンパクトに、さらにわかりやすく ワンライナーにもしぼれる。

$.fn.stars = function() {
    return $(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}