根据 javascript 中的评分显示图像

Question

我有一个脚本，它显示 10 分以下的评分：

overallRating = Ratings.RoundToHalf( ( convenience + quality + rebook )/3 );

这会返回一个值，例如 1 或 1.5 等。

我想做的是根据返回的评分显示星图，但最多只能显示 5 星而不是 10 星。

我将如何使用 if 语句来做到这一点，例如：

if overallRating = 1 {
row = "<img src='star1.png' />";
}

if overallRating = 1.5 {
row = "<img src='star1.png' />";
}

等

这是我的脚本中显示结果的部分：

if ( overallRating > 0 )
row = row + '<td align="center">' + overallRating + "/10</td>";
else 
row = row + '<td align="center">N/A</td>';

row = row + "</tr>";

任何帮助都会很棒！谢谢。

Answer 1

通常开发人员在 div 的背景中使用精灵图像并定位星星的背景图像。

如果您想显示 1-5 颗星并向下舍入到最近的星号，就像您最初想要解决的问题一样，您可以这样写：

var rating = Math.floor(overallRating);
if (rating) {
    var img = "";
    for(var i=0; i < rating; i++) {
    img = img + "<img src='star1.png' />";
    }
    row = '<tr>' + '<td align="center">' + img + "/10</td>";
}
else {
    row = '<tr>' + '<td align="center">N/A</td>';
}
row = row + "</tr>";

如果您想以正确的方式创建评分系统，请查看此链接：Turn a number into star rating display using jQuery and CSS