jQuery星级系统

Question

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

1. 悬停并添加类“ hover”。
2. Click事件会删除类别“悬停”并添加类别“已评级”
3. 当您退出并重新输入mouseout时，请删除类“ rated”。
4. 如果没有更改并且不删除“已评级”类

我的意图是完成此系统，我的知识非常有限。

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

这是演示 。

Answer 2

如果我理解正确，那么您希望可以在需要时“重新投票”。

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

小提琴

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