Question

我有代码在评级上提供五星评级，我认为对每个人来说都很容易，但我不知道如何让这些代码更好。

@ T.J。克劳德有想法解决这个问题：

// 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>';

Answer 1

试试这个：

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

Answer 2

你想要什么基本上可以在循环中完成：

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/

Answer 3

您可以利用这样的事实：一旦切换条件评估为真，那么它将继续执行所有其他条件，直到遇到中断。请尝试以下方法：

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

如何让这个javascript代码更好？

3 个答案: