Javascript评分系统答案

【问题标题】：Javascript rating systemJavascript评分系统
【发布时间】：2013-01-23 09:11:54
【问题描述】：

我不是 javascript 大师，所以请耐心等待。

我正在寻找一个好的 js 评分，我跑到他的博客：

http://www.marcofolio.net/webdesign/jquery_quickie_colourful_rating_system_with_css3.html

作者有demo，提供代码下载。

它看起来真的很不错，只是它没有保存颜色的示例。因此，一旦用户将鼠标移开，颜色就会恢复为黑色（默认颜色）。

知道如何固定颜色吗？

【问题讨论】：

你有 jQuery Color 插件吗？ archive.plugins.jquery.com/project/color
是的，我愿意。我听从了 TimDog 的建议。它不再将颜色恢复为黑色，但是当我从高评级变为低评级时，它不会改变较高评级的颜色。所以我想我必须将它们全部恢复为默认颜色，然后再根据投票给它们上色？您有更好的建议或解决方案吗？

标签： javascript rating

【解决方案1】：

除了 TimDog 添加的代码：

添加

_rated = false;

到

$(".fav_rating li label").hover(function() {

每次用户将鼠标悬停在评分上时都会重置颜色。然后当他们点击 _rated 设置为 true 并因此防止颜色变化

此外，我在表单中使用了一个隐藏输入，其中包含评分值。为此，我的 .click 如下所示：

$(".fav_rating li label").click(function(e) {
    e.preventDefault();
    _rated = true;
    $("#item_fav_rating").val($(this).parent().index() + 1)
});

【讨论】：

【解决方案2】：

这是一种方法——我仔细查看了示例代码中的script.js：

在animationTime下添加这个全局变量

var _rated = false;

颜色在这里被重置——看看我是如何使用_rated 变量的？

// Restore all the rating to their original colours
if (_rated) $("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);

然后在您的点击处理程序中：

//Prevent the click event and show the rating
$("#rating li a").click(function (e) {
    e.preventDefault();
    _rated = true;
    //alert("You voted on item number " + ($(this).parent().index() + 1));
});

这将使颜色保持突出显示。当您刷新页面或重新运行上面的重置动画行时，它将被重置。

希望这会有所帮助。

【讨论】：

当他们从较高的评级变为较低的评级时，这是否有效？
非常感谢您的建议。这很好用，它可以防止颜色回到原来的状态。但是，如果您从高评分变为低评分，则不会将高评分恢复为原始评分。有什么建议吗？

【解决方案3】：

我还没有看到你提到的博客的代码，但似乎当用户点击任何按钮时都会显示警报，即使用了 onclick()。所以你可以有一个全局变量来保存数字，你可以在其中添加代码来保持颜色。

【讨论】：