jquery - jQuery星级插件，可清除对星级点击的评分？

这令人困惑，但是我似乎找不到一个像样的jQuery星级插件，当您单击某个星级时，该插件会清除该星级（例如：您对3个星级进行评级，再次单击第3个星级，并且该评级被删除了）。我一直在寻找插件，这些插件在星星的左边有一个愚蠢的“明确等级”按钮。
当我使用原型时，我使用的是ratingbox，效果很好，但找不到jQuery等效项。

我将不胜感激任何建议！

最佳答案

如果您不需要任何特殊功能，则可以使用我的代码。如果需要，应该很容易将其转换为插件。

如果不需要悬停跟踪效果，只需删除mouseenter和mouseleave事件。

设置的评级保存在容器div的data属性中，您可以通过$('.rating').data('rating')访问它。

观看现场演示，从互联网上获得一些随机图像：http://jsfiddle.net/abPFF/1/

HTML：

<div class="rating" data-rating="3">
    <div></div><div></div><div></div><div></div><div></div>
</div>

CSS：

.rating { display:inline-block; padding:0px; }
.rating div { display:inline-block; width:48px; height:48px; margin:0px; background-image: url('star-off.png');}

.selected { background-image: url('star.png') !important; }
.highlighted { background-image: url('star.png') !important; }

Javascript：

function ShowRating($element, rating){
    $stars = $element.find('div');
    $stars.removeClass('selected highlighted');
    rating = parseInt(rating);
    if(rating < 1 || rating > $stars.length) return;

    $stars.eq(rating-1).addClass('selected')
        .prevAll().addClass('highlighted');
    return;
}

$('.rating').each(function(){
    var $this = $(this);
    ShowRating($this, $this.data('rating'));
}).bind({
    mouseleave: function(){
        var $this = $(this);
        ShowRating($this, $this.data('rating'));
    }
}).find('div').bind({
    mouseenter: function(){
        var $this = $(this);
        ShowRating($this.parent(), $this.index() + 1);
    },
    click: function(){
        var $this = $(this);
        var $parent = $this.parent();
        var idx = $this.index() + 1;
        if($parent.data('rating') == idx){
            // Remove rating
            ShowRating($parent, 0);
            $parent.data('rating', 0);
        } else {
            // Set rating
            ShowRating($parent, idx);
            $parent.data('rating', idx);
        }
    }
});

关于jquery - jQuery星级插件，可清除对星级点击的评分？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5916844/