-1

私は評価に基づいて5つ星の評価をレンダリングするコードを持っています。誰にとっても非常に簡単だと思いますが、このコードを改善する考えはありません。

@TJ Crowderには、これを解決するためのアイデアがあります。

// Flags for whether to show stars, based on `average` being
// a fractional number `0 <= average < 5`
var stars = [
    average > 0,
    average > 1,
    average > 2,
    average > 3,
    average > 4
];

これを実装する方法、または誰かがこのコードをより良くするためのアイデアを持っていますか？

var result = '';
var one_star = '';
var two_star = '';
var three_star = '';
var four_star = '';
var five_star = '';

if(data == 0) {}
else if(data == 1) {
    one_star = 'star-rating-on';
    two_star = '';
    three_star = '';
    four_star = '';
    five_star = '';
}
else if(data == 2) {
    one_star = 'star-rating-on';
    two_star = 'star-rating-on';
    three_star = '';
    four_star = '';
    five_star = '';
}
else if(data == 3) {
    one_star = 'star-rating-on';
    two_star = 'star-rating-on';
    three_star = 'star-rating-on';
    four_star = '';
    five_star = '';
}
else if(data == 4) {
    one_star = 'star-rating-on';
    two_star = 'star-rating-on';
    three_star = 'star-rating-on';
    four_star = 'star-rating-on';
    five_star = '';
}
else if(data == 5) {
    one_star = 'star-rating-on';
    two_star = 'star-rating-on';
    three_star = 'star-rating-on';
    four_star = 'star-rating-on';
    five_star = 'star-rating-on';
}

result += '<span class="star-rating-control">';
result += '<div class="star-rating rater-5 star star-rating-applied star-rating-readonly '+ one_star +'"><a title="Poor">1</a></div>';
result += '<div class="star-rating rater-5 star star-rating-applied star-rating-readonly '+ two_star +'"><a title="OK/Fair">2</a></div>';
result += '<div class="star-rating rater-5 star star-rating-applied star-rating-readonly '+ three_star +'"><a title="Good">3</a></div>';
result += '<div class="star-rating rater-5 star star-rating-applied star-rating-readonly '+ four_star +'"><a title="Great">4</a></div>';
result += '<div class="star-rating rater-5 star star-rating-applied star-rating-readonly '+ five_star +'"><a title="Excellent">5</a></div>';
result += '</span>';
4

3 に答える 3

0

これを試して：

var one_star = '', two_star = '', three_star = '', four_star = '', five_star = '';
if(data == 1) { one_star   = 'star-rating-on'; }
if(data <= 2) { two_star   = 'star-rating-on'; }
if(data <= 3) { three_star = 'star-rating-on'; }
if(data <= 4) { four_star  = 'star-rating-on'; }
if(data <= 5) { five_star  = 'star-rating-on'; }

これにより、すべての変数が''デフォルトに設定され、必要なだけ追加さstar-rating-onれます。

または、配列を使用します。

var star = ['','','','',''];
for(var i = 0; i < star.length && i <= data -1; i++){
    star[i] = 'star-rating-on';
}

var baseDiv = '<div class="star-rating rater-5 star star-rating-applied star-rating-readonly ';
result += '<span class="star-rating-control">'
  + baseDiv + star[0] +'"><a title="Poor">1</a></div>'
  + baseDiv + star[1] +'"><a title="OK/Fair">2</a></div>'
  + baseDiv + star[2] +'"><a title="Good">3</a></div>'
  + baseDiv + star[3] +'"><a title="Great">4</a></div>'
  + baseDiv + star[4] +'"><a title="Excellent">5</a></div>'
  + '</span>';
于 2013-01-30T09:46:32.240 に答える
0

あなたが望むことは基本的にループで行うことができます：

var i
  , on
  , titles = [null, 'Poor', 'Ok/Fair', 'Good', 'Great', 'Excellent']
  , result = '<span class="star-rating-control">';
for (i = 1; i <= 5; i++) {
  on = data >= i ? 'star-rating-on' : '';
  result += '<div class="star-rating rater-5 star star-rating-applied star-rating-readonly ' + on +'"><a title="' + titles[i] + '">' + i + '</a></div>'
}
result += '</span>';

必要なのはこれだけです。ここで実際の例を参照してください（例ではデータを3に設定しています）：http：//jsfiddle.net/k7sVC/1/

于 2013-01-30T09:56:43.987 に答える
0

スイッチ条件がtrueと評価されると、ブレークが発生するまで、それ以降のすべての条件を実行し続けるという事実を利用できます。次のことを試してください。

<html>
<head>
</head>
<body>
<div id="stars"></div>
<script language="JavaScript">
html='';
num=4;
switch(num) {
    case 5:
        html+="*";
    case 4:
        html+="*";
    case 3:
        html+="*";
    case 2:
        html+="*";
    case 1:
        html+="*";
    }
document.getElementById("stars").innerHTML=html;
</script>
</body>
</html>
于 2013-01-30T10:03:17.383 に答える