Remove previously added class

Question

I am working on a rating system where a user can rate by stars.

I made my rating stars as follows:

<div id="rating-submit">
    <ol class="rating-stars">
        <div class="rating"></div>
        <li rate="1"></li>
        <li rate="2"></li>
        <li rate="3"></li>
        <li rate="4"></li>
        <li rate="5"></li>
    </ol><!--End rating-stars-->
</div><!--End rating-submit-->

I placed <li> items (stars) over my "rating" <div> , and if you click on one of the items I style my "rating" <div> with a CSS background so it looks like you have clicked this star.

I style it by giving the "rating" <div> an extra class called rating-(1, 2, 3, 4, 5).

jQuery:

jQuery( document ).ready( function( $ ) {

    $( '#rating-submit .rating-stars li' ).click( function() {
        var rating = $( this ).attr( 'rate' );
        $( '#rating-submit .rating' ).addClass( 'rating-' + rating );

    });

});

My problem:

If I add for example "rate-3" as class and then click on the second star, the "rate-3" class stays there and it overrules the other class.

My question:

How can I remove the previously added classes if I click on a new star?

Here is my Jsfiddle

Answer 1

Make each star it's own element, with its own generic class for on/off. Use prevAll().addClass() to add the class to all previous stars, and removeClass() to remove it. It's much simpler than trying to maintain each star having it's own unique class.

To do this, firstly make your HTML valid by removing the div within the ol and using data attributes::

<div id="rating-submit">
    <ol class="rating-stars">
        <li data-rate="1"></li>
        <li data-rate="2"></li>
        <li data-rate="3"></li>
        <li data-rate="4"></li>
        <li data-rate="5"></li>
    </ol>
</div>

You can then make your CSS generic based on a single class on each stars' li :

#rating-submit .rating-stars {
    position: static;
    width: 112px;
    height: 20px;
    margin: 0;
    padding: 0;
    background: url(http://s4.postimg.org/qukg9gyih/rating_stars.png) no-repeat;    
}

#rating-submit .rating-stars li {
    height: 20px;
    width: 19px;
    display: inline-block;
    margin: 0;
    list-style: none;
}

#rating-submit .rating-stars li.active {
    background: url(http://s4.postimg.org/qukg9gyih/rating_stars.png) 0 -38px no-repeat;    
}

Finally all your JS needs to do is set the active class on the chosen star, and those to the left of it using prevAll() :

$('#rating-submit .rating-stars li').click(function () {
    var $chosenStar = $(this);
    $chosenStar
        .siblings('li').removeClass('active').end() // remove existing classes
        .prevAll().add(this).addClass('active');
    console.log($chosenStar.data('rate')); // the chosen rating value
});

Working fiddle

Answer 2

I've changed a little bit your approach to solve your problem.

jsFiddle

<div id="rating-submit">
    <ol class="rating-stars">
        <li rate="1"></li>
        <li rate="2"></li>
        <li rate="3"></li>
        <li rate="4"></li>
        <li rate="5"></li>
    </ol><!--End rating-stars-->
</div><!--End rating-submit-->

jQuery( document ).ready( function( $ ) {

    // Rating stars
    $( '.rating-stars li' ).on("click", function() {
        var i, len, rating = $( this ).attr( 'rate');

        $( '.rating-stars li').removeClass("rated");
        for(i = 0, len = rating; i < rating; i = i + 1){
            $( '.rating-stars li' ).eq(i).addClass("rated");
        }

    });

});

The problem with your old approach was that you could not trigger the click event on the li anymore, when they were overlapped by your div rating.

About the image, you need just a "one start on" "one off" not all the five stars.

Answer 3

before your addClass() call, remove the existing rating-x classes:

$( '#rating-submit .rating' ).removeClass('rating-1 rating-2 rating-3 rating-4 rating-5');

Important: There is a bug in your implementation that makes it impossible to click stars that are yellow. This is because the .rating div sits above the li s, which makes them unclickable.

Answer 4

You are on the wrong way.

The problem is that your yellow starts are over li elements, so we can't click on lower grey stars, and if we try, we don't know on which stars we have clicked.

You should not do like this, and add a class on every li elements which is yellow