-1

我有代码可以根据评级呈现五星级评级，我认为这对每个人来说都很容易，但我不知道如何让这段代码变得更好。

@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

您可以利用这样一个事实，即一旦切换条件评估为真，那么它将继续执行所有进一步的条件，直到遇到中断。尝试以下操作：

<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 回答
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 回答