CODEWITHSUNDEEP
javascriptjquery
Colpaisa
Colpaisa

Reputation: 365

jQuery star rating system

I'm trying to do a very simple system

  1. Hover and add class "hover".
  2. Click event removes class "hover" and adds class "rated"
  3. When you exit and reenter mouseout remove class "rated".
  4. If there were no changes in and not remove class "rated"

My intention is to finish this system, my knowledge is very limited in javascript.

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

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

My Question: How to make so that you can edit the score whenever you want, but if there was no change in the mouseover leave the previous score.

Upvotes: 0

Views: 1233

Answers (2)

n1k1ch
n1k1ch

Reputation: 2702

You need to save selection state with data-selected attribute used on clicked star. This will allow you to return to pre-mouseover selection state on mouseout event

So, here is the code:

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

Here is the Demo.

Upvotes: 1

Craighead
Craighead

Reputation: 519

If I understand correctly you want to be able to "re-vote" if needed.

You are going to need to add a few if statements, but this should do the trick. It's messy, but I was in a hurry.

Fiddle

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

Please note that the below is the incomplete function - just provided for example:

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

Upvotes: 0

Related Questions