jquery - 从数据库中获取数据至 5 星评级

Question

我正在使用此模板在用户旁边显示评分。

{insert name=get_percent value=a assign=mpercent userid=$p.USERID}

  {if $mpercent ne ""}
    <div class='user-rate'>
      rate<span class='green'>{$mpercent}&#37;</span>
    </div>

  {else}
    <div class='user-rate'>not rated yet</div>
  {/if}

我想将评级从百分比值更改为星级 (0-5)。

我尝试了 this link 中的答案

这是我添加以下 CSS 后的代码:

span.stars, span.stars span {
  display: block;
  background:url(../images/stars.png) 0 -16px repeat-x;
  width: 80px;
  height: 16px;
}

span.stars span {
  background-position: 0 0;
}

和 JavaScript:

$(function() {
  $("span.stars").stars();
});

$.fn.stars = function() {
  return $(this).each(function() {
    $(this).html($('<span />')
      .width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
  });
}

并将其用于每个评级:

<p> <span class="stars">{$mpercent}</span>    </p>

我使用 {$mpercent} 获取成员(member)的评分，但结果是我一直获得 5 星。

如果我将 span class 的值更改为固定数字(比如 1,2 或 3)，我也会得到相同的结果。

Answer 1

两点:

1. 您链接的代码明确指出您需要确保该值介于 0 和 5 之间。因此使用 0-100 将显示 5 代表 5-100。您需要使用 ($mpercent/100)*5 转换为 0-5 范围。
2. 通过将 jQuery 插件压缩到一行，您不必要地使代码难以阅读。

但是，代码看起来是正确的。我建议您将值更改为 0 到 5 之间，然后仔细检查它仍然始终显示 5*。请注意，此代码仅在加载 DOM 时运行，因此如果您使用 chrome 开发人员工具或类似工具更改 span 的内容，您不能期望星级评分会自动更新。