JQuery 星级评定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4542883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Star Rating
提问by Dan Dascalescu
Can anyone suggest a simple JQuery five star rating script that is easy to setup. I just need a single instance on a single page. I don't care if it writes to a file or mysql database to calculate rating average.
任何人都可以建议一个简单的 JQuery 五星级评级脚本，它很容易设置。我只需要一个页面上的单个实例。我不在乎它是否写入文件或 mysql 数据库来计算评分平均值。
It should display the number of votes and the calculated average. It should also check if the person has already rated or should not allow more than 2 ratings at a time. Should have cookies or sessions to prevent multiple ratings or some other mechanism.
它应该显示投票数和计算的平均值。它还应该检查该人是否已经评分或一次不应允许超过 2 个评分。应该有 cookie 或会话以防止多重评级或其他一些机制。
I don't care if its free or cost money but the licensing should allow me to use it in commercial applications.
我不在乎它是免费的还是花钱的，但许可应该允许我在商业应用中使用它。
Appreciate all suggestions! Thank you!
欣赏所有建议！谢谢！
P.S. I spent a couple of day trying different scripts online but have not found anything that was actually complete.
PS 我花了几天时间在线尝试不同的脚本，但没有找到任何实际完整的脚本。
采纳答案by zsalzbank
This looks nice:
http://www.fyneworks.com/jquery/star-rating/
这看起来不错：http:
//www.fyneworks.com/jquery/star-rating/
But you will need more of a backend to make sure people can't vote twice and to get an average of number of votes. The votes need to be stored somewhere (or at leas the current average) and whether or not a user voted already should be stored on the server too.
但是你需要更多的后端来确保人们不能投票两次并获得平均投票数。投票需要存储在某处（或至少是当前的平均值），并且用户是否已经投票也应该存储在服务器上。
This link can tell you about some of the server-side stuff that needs to be done: http://www.yvoschaap.com/index.php/weblog/css_star_rater_ajax_version/
这个链接可以告诉你一些需要做的服务器端的事情：http: //www.yvoschaap.com/index.php/weblog/css_star_rater_ajax_version/
回答by Dan Dascalescu
I've packaged a star rating pluginfor meteor, so I've evaluated all the 11 jQuery rating plugins listed here, and the winner is, by far, RateIt.
我为meteor打包了一个星级评分插件，所以我评估了这里列出的所有11 个jQuery 评分插件，到目前为止，获胜者是RateIt。
Fast, Progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), Unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, supports as many stars as you'd like, and also any step size.
Minified size: 4.35KB (1.55KB when gzipped).
Tested on: IE6-10, Chrome 7-22, Firefox 3.6-16, Opera 10.63-12 - using jQuery 1.6.2 - 1.8.2. Touch support test on iPad iOS 4.2.1-5
快速、渐进增强、触摸支持、可定制（只需更换图像或更改一些 CSS）、不显眼的 JavaScript（使用 HTML5 data-* 属性）、RTL 支持、支持任意数量的星星以及任何步骤尺寸。
缩小后的大小：4.35KB（gzip 压缩时为 1.55KB）。
测试：IE6-10、Chrome 7-22、Firefox 3.6-16、Opera 10.63-12 - 使用 jQuery 1.6.2 - 1.8.2。iPad iOS 4.2.1-5 触控支持测试
RateIt can optionally use the HTML5 range input element- perfect for this purpose. No lame <li>elements or radio buttons.
RateIt 可以选择使用HTML5 范围输入元素- 非常适合此目的。没有蹩脚的<li>元素或单选按钮。
The others are clearly lesser solutions:
其他显然是较小的解决方案：
- 78 open issues
- on Google Code, not on GitHub, which means little to no pull requests
- latest update 7 months ago
- 78个未解决的问题
- 在 Google Code 上，而不是在 GitHub 上，这意味着几乎没有拉取请求
- 最新更新 7 个月前
- somewhat slow development check the issues tab)
- no mention of browser compatibility or touch support
- has test suite
- 开发有点慢，请检查问题选项卡）
- 没有提到浏览器兼容性或触摸支持
- 有测试套件
https://github.com/ripter/jquery.rating
https://github.com/ripter/jquery.rating
- only 22 commits
- no touch support, browser compatibility listing or anything
- raty is clearly better
- 只有 22 次提交
- 没有触摸支持、浏览器兼容性列表或任何东西
- 比例显然更好
Anyway, none of these mentions browser compatibility or touch support. RateIt does, and it also explains clearly why it's better and different from the others:
无论如何，这些都没有提到浏览器兼容性或触摸支持。RateIt 确实如此，它也清楚地解释了为什么它更好且与其他的不同：
Why is RateIt different
Although it does the same job as the rest of the jQuery star rating plugins, the main difference is its simplicity. Most plugins create an element for each (partial) star, be it a div with a star background, or an img tag. Each of these tags gets a hover event, and a click event. And on these hover/click events it has to go and talk to the other stars, telling them to change their state.
So each star plugin does a lot of DOM alterations (adding the number of stars as elements), and adds lots of events (again the number of stars times 2).
RateIt uses basically three divs.
为什么 RateIt 不同
尽管它与其他 jQuery 星级评分插件的工作相同，但主要区别在于它的简单性。大多数插件为每个（部分）星形创建一个元素，无论是带有星形背景的 div 还是 img 标签。每个标签都有一个悬停事件和一个点击事件。在这些悬停/点击事件中，它必须去和其他星星交谈，告诉他们改变他们的状态。
所以每个星号插件都会做很多 DOM 更改（添加星号作为元素），并添加很多事件（同样是星号乘以 2）。
RateIt 基本上使用三个 div。
Oh, and the last update? Yesterday.
哦，最后一次更新？昨天。
