jQuery と CSS を使用して数値入力から星評価を動的に生成するにはどうすればよいですか?

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

評価を表示する領域では、数値を星評価に変換します。共通の課題。 jQuery と CSS を使用して、数値入力に基づいて星による評価を動的に生成するにはどうすればよいですか?

解決策:

これは、単一の画像とデータを活用する革新的なソリューションです。 CSS:

CSS

<br>span.stars、span.stars span {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;

ログイン後にコピー

}

span.stars スパン{

background-position: 0 0;

}

画像:

黄色の星が付いた 1 つの画像 (stars.png)上部に灰色の星があります一番下。

jQuery:

<br>$.fn.stars = function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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);
});

ログイン後にコピー