星级评定系统 (jQuery)答案

【问题标题】：Star Rating System (jQuery)星级评定系统 (jQuery)
【发布时间】：2010-12-04 12:58:03
【问题描述】：

我想您应该熟悉网站上常用的 5 星评级系统来对项目进行评级？当我在 google 上查找时，只有 jQuery 插件使用 sprite 等。如何制作一个包含 12 张图像（0、0.5、1、1.5 等）的星级评分系统？

我想这样做是因为我有图片，而且编辑它们需要做很多工作。

【问题讨论】：

（可能比修改一个你不知道它是如何工作的jQuery插件的代码工作更少）

【解决方案1】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
function setRating(number)
{
    jQuery('#main').css('background','url(images/'+number+'-star.gif) no-repeat');       
}

function saveRating(number)
{
    jQuery('.rating').attr('onmouseout','setRating(\''+number+'\')');
    alert(number);        
}
</script>
<style>
.rating
{
    width:8px;
    height:16px;
    float:left;    
}
#main
{
    width:80px; 
    height:16px;    
}
</style>
<div id="main" style="background:url(images/1.0-star.gif) no-repeat;">
    <div class="rating" onmouseover="setRating('0.5')" onclick="saveRating('0.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('1.0')" onclick="saveRating('1.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('1.5')" onclick="saveRating('1.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('2.0')" onclick="saveRating('2.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('2.5')" onclick="saveRating('2.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('3.0')" onclick="saveRating('3.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('3.5')" onclick="saveRating('3.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('4.0')" onclick="saveRating('4.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('4.5')" onclick="saveRating('4.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('5.0')" onclick="saveRating('5.0');" onmouseout="setRating('1.0')"></div>
</div>

这就是我要找的。p>

【讨论】：

这是一个很好的简单解决方案，但是如何解决图像延迟加载的问题呢？提前致谢

【解决方案2】：

你找到我关于同一问题的旧答案了吗？

Turn a number into star rating display using jQuery and CSS

图像很简单，将现成的图像转换为该图像应该没有问题。

插件本身也很简单，你应该能够很容易地理解它的内部工作原理以适应你自己的需要。目前该插件仅处理星星的显示，而不是实际选择，但应该不难将其转换为此类。

【讨论】：

【解决方案3】：

有plenty of sprite generators out there会为你生成css和sprite图像。 :)

【讨论】：

【解决方案4】：

Nettuts 的这篇文章可能正是您想要的：

http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/

【讨论】：