1

Web サイトで人気度に基づいて 3 つ星の評価システムを実装しましたが、クライアントはこれらの 3 つ星 (デフォルトでは青) の色を、人気 (度合) を示す赤、青、緑に変更したいと考えています。

この星評価システムを CSS スプライトを使用して実装しました。ここでは、2 つの星の画像 (金色と灰色) を 1 つのスプライトに含め、いくつかのロジックを使用してこれらを表示しました。1 つの色では問題なく動作しますが、星ごとに 3 つの色を実装するにはどうすればよいでしょうか?

HTML

<div class="star-box">
   <li>
       <span class="stars"><?php echo $position;?></span>
  </li>
</div>

PHP

if( !isset($_SESSION['ranking']) || $_SESSION['ranking']['points'] <= 1000 ) {
    if( !isset($_SESSION['ranking']['points']) || $_SESSION['ranking']['points'] == '' ) {
        $position = '0px';
        $position = 0.00;
    } else {
        $position = ($_SESSION['ranking']['points'] * 0.14).'px';
        $position = 0.75;
    }

    $str1 = 'class="active" ';
    $str1 .= ' style="background-position:'.$position.' 9px;"';

}

if( $_SESSION['ranking']['points'] > 1000 &&  $_SESSION['ranking']['points'] <= 5000 ) {
    if( !isset($_SESSION['ranking']['points']) || $_SESSION['ranking']['points'] == '' ) {
        $position = '0px';
        $position = 0.00;
    } else {
        $position = ($_SESSION['ranking']['points']*0.035).'px';
        $position = 1.40;
    }
}

jQuery

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

$.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
        val = Math.round(val * 4) / 4;
        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);
    });
}

CSS

span.stars, span.stars span {
    display: block;
    background: url(../../images/stars.png) 0 -16px repeat-x;
    width: 50px;
    height: 20px;
    text-indent: -9999px;
}

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

スプライト画像:

4

2 に答える 2

0

ノックアウトに関するこのチュートリアルを確認してください。コードに適用できるスター評価システムの実行方法が示されていますhttp://learn.knockoutjs.com/#/?tutorial=custombindings

于 2013-08-17T08:30:37.637 に答える