jQuery 星级评分系统

Question

我正在尝试做一个非常简单的系统

1. 悬停并添加类“悬停”。
2. 点击事件移除类“hover”并添加类“rated”
3. 当您退出并重新进入 mouseout 时，删除“额定”类。
4. 如果“评级”类没有变化且未删除

我的目的是完成这个系统，我的javascript知识非常有限。

mouseover: function(){
  // remove hover
  t.rate.eventDrain();
  // fill hover
  t.rate.eventFill($(this));
},
mouseout: function(){
  t.rate.eventDrain();
},

http://jsfiddle.net/unm5N/7/

我的问题： 如何制作，以便您可以随时编辑乐谱，但如果鼠标悬停时没有更改，则保留之前的乐谱。

Answer 1

您需要使用点击星上使用的data-selected 属性保存选择状态。这将允许您在 mouseout 事件上返回 鼠标悬停前选择状态

所以，这里是代码：

HTML：

<div id="rating">
    <a class="star"></a>
    <a class="star"></a>
    <a class="star"></a>
    <a class="star"></a>
    <a class="star"></a>
    <!-- as many as you need -->

        <input id="getRating" type="button" value="Rate!"></input>
</div>

CSS：

a.star {
    display:block;
    height: 20px;
    width: 20px;
    background: url(http://sc.cuevana.tv/new/img/rate_list.png);
    float: left;
    cursor: pointer;
}

a.star.hover {
    background-position: 0 -20px;
}

a.star.rated {
    background-position: 0 -40px;
}

JavaScript：

$(document).on("click", ".star", function (e) {
    //clearing currrently "rated" star
    $(".star").removeAttr("data-selected");

    var $this = $(this);
    //un-"rating" all the following stars
    $this.nextAll(".star").removeClass("rated");

    //mark clicked star with data-selected attribute
    $this.addClass("rated").attr("data-selected", "true");

    //mark previous stars
    $this.prevAll(".star").addClass("rated");
});

$(document).on("mouseover", ".star", function (e) {
    //unmark rated stars
    $(".star").removeClass("rated");
    var $this = $(this);

    //mark currently hovered star as "hover"
    $(this).addClass("hover");

    //mark preceding stars as "hover"
    $this.prevAll(".star").addClass("hover");
});

$(document).on("mouseout", ".star", function (e) {
    //un-"hover" all the stars
    $(".star").removeClass("hover");

    //mark star with data-selected="true" and preceding stars as "rated"
    $("[data-selected='true']").addClass("rated").prevAll(".star").addClass("rated");
});

$(document).on("click", "#getRating", function (e) {
    //wise comment here
    var rating = $(".star.rated").length;
    alert(rating);
});

这里是Demo。

Answer 2

如果我理解正确，您希望能够在需要时“重新投票”。

您将需要添加一些 if 语句，但这应该可以解决问题。很乱，但我很着急。

Fiddle

 mouseover: function(){
        if(!t.rate){
          t.rate.eventDrain();
        }else{
          t.rate.eventFill($(this));
        }`

请注意，以下是不完整的功能 - 仅提供了示例：

 click: function(){
        if($(this).prevAll().attr("class") == 'rated hover')
        {
            $("div.puntuar a").removeClass('rated');
            $(this).add($(this).prevAll()).addClass('rated');
        }else{
            $(this).add($(this).prevAll()).addClass('rated');
        }