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

Look at the jquery toggle function – enno.void Apr 06 '17 at 09:41 — enno.void, Apr 06 '17 at 09:41
not works:(..all stars dispared – driveaferrari Apr 06 '17 at 09:45 — driveaferrari, Apr 06 '17 at 09:45

EllisTheEllice · Accepted Answer · 2017-04-06T10:53:13.230

0

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

edited Apr 06 '17 at 10:53

answered Apr 06 '17 at 09:47

EllisTheEllice

905
3
14
33

Then please tell us: What do you need? In fiddle, this works for me fine. – EllisTheEllice Apr 06 '17 at 09:53
I need to to work with .click event because if you want to write something in the input..I want to keep the stars..colored – driveaferrari Apr 06 '17 at 09:57
any idea.. how to use click instead hover? – driveaferrari Apr 06 '17 at 10:14
I edited my answer. Use this as a starting point. It´s not fully functional, but should give you an idea, how to start. – EllisTheEllice Apr 06 '17 at 10:17
This part i've done too...but I have no idea how to remove the stars..to be fully functional – driveaferrari Apr 06 '17 at 10:19
I don´t get your requirements to be honest. When should the stars be removed? Please rewrite your initial question and rephrase it as precisely as possible. – EllisTheEllice Apr 06 '17 at 10:24
I came up with a solution. I edited my answer. Although this is not the sexiest solution, it should cover your requirements. – EllisTheEllice Apr 06 '17 at 10:54
Phenix. Thanks bro! – driveaferrari Apr 06 '17 at 11:05

10 stars rating system with JQuery

1 Answers1