javascript - Javascript评分系统

Question

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

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

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

作者有一个demo，并提供了代码下载。

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

知道如何固定颜色吗？

Answer 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)
});

Answer 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));
});

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

希望这可以帮助。

Answer 3

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