CODEWITHSUNDEEP
javascriptjquerycss
Alan Coromano
Alan Coromano

Reputation: 26008

Trying to make star-rating control remember the rating

There is an example of rating "control" I found here http://jsfiddle.net/RpfLa/400/ It works fine but it doesn't have the ability to keep the star highlighted when it was clicked.

Although to make it work I just have to add class="rated" to a tag(s) s but it's still a bit complicated.

 <!-- a rating with 1 star -->
    <span class='star-rating'>
      <s class='rated'>
       <s>
        <s>
         <s>
          <s>
          </s>
         </s>
        </s>
       </s>
      </s>
     </span>

I just can't figure out what the efficient algorithm for that.

So when I know what the rating is 

var numStars = $(e.target).parentsUntil("span").length+1;

How do I find a relevant s and make it and all ones before it have class="rated"?

Upvotes: 1

Views: 223

Answers (3)

mfo
mfo

Reputation: 152

$(e.target).parent('div').find('.rated').removeClass('rated');
$(e.target).addClass('rated');
$(e.target).parentsUntil("div").addClass('rated');

http://jsfiddle.net/KczMC/

Upvotes: 0

nbrooks
nbrooks

Reputation: 18233

jsFiddle Demo

$(function() {
    $("div.star-rating > s, div.star-rating-rtl > s").on("click", function(e) {
        $(e.target).parentsUntil("div").andSelf()
        .addClass('rated').end().end()
        .find('.rated').removeClass('rated');
    });
});

Relevant links: andSelf, end, addClass

Most of these are intuitively named. andSelf adds the current element to the matched set after using a filter like parentsUntil. end cancels that filtering.

Upvotes: 2

ckersch
ckersch

Reputation: 7687

Can you select the top element and just loop down through all of the stars? Something like:

starSpan = $(".star-rating"); //or whatever selector you want to use for the span
currentStar = starSpan
for (i = 0; i < 5; i++) {
    currentStar = currentStar.children('s :first')
    if (i <= numStars) {currentStar.attr('class','rated')}
    else {currentStar.attr('class','')}
}

That way you can deal with reducing the star ratings as well.

Upvotes: 1

Related Questions