在javascript中显示基于评级的图像

display images based on rating in javascript

本文关键字：于评级 图像 显示 javascript      更新时间：2023-10-25

我有一个脚本，显示评分为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' />";
}

etc

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

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

任何帮助都会很棒！谢谢

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

如果你想显示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>";

如果你想以正确的方式创建一个评级系统，请查看此链接：使用jQuery和CSS 将数字转换为星级显示

相关文章：