jQuery星级评分系统

Question

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

1. 将鼠标悬停并添加“hover”类。
2. 点击事件会移除“hover”类，并添加“已评级”类
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');
        }