Javascript jQuery星级评定系统

我试着做一个非常简单的系统

悬停并添加类“Hover”

单击事件删除类“悬停”并添加类“额定”

当您退出并重新输入鼠标时，请删除“rated”类

如果“额定”等级未发生变化且未删除

我的目的是完成这个系统，我对javascript的了解非常有限

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

我的问题:

---

如何使您可以随时编辑分数，但如果鼠标没有更改，请保留以前的分数。

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

您需要添加一些if语句，但这应该可以做到。这里很乱，但我很赶时间

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

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

---

您需要将选择状态与单击的星号上使用的

数据selected

属性一起保存。这将允许您在

mouseout

事件上返回到pre mouseover选择状态

下面是代码：

HTML: JavaScript:

---

这是答案。你的问题是…？你的问题是什么？代码在您提供的JSFIDLE中运行良好。请将您的FIDLE简化为您的问题所涉及的内容，并在更新之前点击TidyUp按钮。@Daedalus我正在尝试创建一个。如果不删除该类上的鼠标，则在评分时会出现我的问题。@LorDex如何制作，以便您可以随时编辑分数，但是，如果鼠标悬停没有变化，请保留以前的分数。这正是我想做的，只需检查您的代码，这是一个问题，如果您已经投票并再次投票，“rated”类必须“暂时”删除，因为如果您输入“mouseover”不要做任何改变来显示以前的voteThank你非常感谢你的帮助这对我帮助很大。如果有帮助，请随意回答我很抱歉，但是作为一个新手，我不能增加声誉。

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

<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>

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

$(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);
});