10 stars rating system with JQuery

Question

Here is the fiddle: https://jsfiddle.net/0yvkuL29/

I want to use click instead of hover. I've tried with .on("click"). But it works just to put the .rating_over and I can't remove the class. I want to create the rating system to work with javascript/ jquery. I don't need to work with font-awesome.

$('.ratings_stars').hover(

  // Handles the mouseover

  function() {

    $(this).prevAll().andSelf().addClass('ratings_over');


  },

  // Handles the mouseout

  function() {

    $(this).prevAll().andSelf().removeClass('ratings_over');

  }

);

.ratings {
  overflow: visible;
  padding: 10px;
  position: relative;
  width: 100%;
  text-align: center;
}

.ratings_stars {
  background: url('https://maxcdn.icons8.com/Share/icon/Messaging//star1600.png') no-repeat;
  display: inline-block;
  height: 70px;
  padding: 2px;
  width: 7%;
  background-size: 100%;
}

.ratings_vote {
  background: url('') no-repeat;
}

.ratings_over {
  background: url('http://www.fancyicons.com/download/?id=3343&t=png&s=256') no-repeat;
  width: 7%;
  background-size: 100%;
}

.total_votes {
  background: #eaeaea;
  top: 58px;
  left: 0;
  padding: 5px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-12 no-padding">
    <div id="rating" class="ratings no-padding">
      <div class="star_1 ratings_stars"></div>
      <div class="star_2 ratings_stars"></div>
      <div class="star_3 ratings_stars"></div>
      <div class="star_4 ratings_stars"></div>
      <div class="star_5 ratings_stars"></div>
      <div class="star_6 ratings_stars"></div>
      <div class="star_7 ratings_stars"></div>
      <div class="star_8 ratings_stars"></div>
      <div class="star_9 ratings_stars"></div>
      <div class="star_10 ratings_stars"></div>
    </div>
  </div>
</div>
<input type="text">

EDIT

//Rate and Review
$('.ratings_stars').on('mouseover',function(){
                $('.ratings_stars').on('mouseout',mouseout);
                $(this).addClass('ratings_over');
        $(this).prevAll('.ratings_stars').addClass('ratings_over');
});

        mouseout=function(){
             $(this).removeClass('ratings_over');
             $(this).prevAll('.ratings_stars').removeClass('ratings_over');
        };

$('.ratings_stars').on('mouseout',mouseout);

$('.ratings_stars').click(function(){
        $('.ratings_stars').off('mouseout');
  });

when I click on the 10th star, all stars become yellow which is the right behaviour. Now when I click on the first star, the rest of the stars don't turn black and I need this to be implemented through onclick

Answer 1

Your fiddle tells what is wrong: The method andSelf is unknown. You can adapt the JavaScript to something like this:

var clicked=false;
var marked=0;

mouseout=function(){
        console.log(clicked+' '+marked)
        $(this).removeClass('ratings_over');
        $(this).prevAll('.ratings_stars').removeClass('ratings_over');
        if(clicked){
           $('.ratings_stars').slice(0,marked).addClass('ratings_over');
        }
};

mouseover=function(){
    $('.ratings_stars').on('mouseout',mouseout);
    $('.ratings_over').removeClass('ratings_over');

    $(this).addClass('ratings_over');
    $(this).prevAll('.ratings_stars').addClass('ratings_over');
};

$('.ratings_stars').on('mouseout',mouseout);
$('.ratings_stars').on('mouseover',mouseover);


$('.ratings_stars').click(function(){
        clicked=true;
        marked=$('.ratings_over').length;
  });