Pammm Pammm - 1 month ago 6
jQuery Question

Don't work correctly when clicking on stars

I have created a small code for rating system and I have used font awesome star in my form. It doesn't work correctly when I click on it. I want to make the rating system work correctly when I click on it.

This is the code i'm using:



jQuery(document).ready(function ($) {
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).next('i').slideToggle('500');
$(this).find('i').toggleClass('fa-star fa-star-o');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
$(this).next('i').slideToggle('500');
$(this).find('i').toggleClass('fa-star fa-star-o');
}
);

function set_votes(widget) {
jQuery('.star_' + widget).prevAll().andSelf().addClass('ratings_vote');
}
$('.ratings_stars').bind('click', function() {
var star = this;
$(star).prevAll().removeClass('ratings_over');
$(star).prevAll().andSelf().addClass('ratings_over');
$(this).next('i').slideToggle('500');
$(this).find('i').toggleClass('fa-star fa-star-o');
$(star).nextAll().removeClass('ratings_vote');
$('#client_ratings').val( jQuery(star).attr('data-id') );
var data_id =jQuery(star).attr('data-id');
jQuery('.star_' + data_id).prevAll().andSelf().addClass('ratings_vote');
});
jQuery('.rate_widgett').each(function(i) {
$(this).nextAll().removeClass('ratings_vote');
$(this).prevAll().removeClass('ratings_vote');
var data_count = $(this).attr('data-id');
$(this).find('.star_' + data_count).prevAll().andSelf().addClass('ratings_vote');
});
});

.ratings_choice {
overflow: visible;
padding: 10px;
position: relative;
width: 180px;
height: 32px;
}
.ratings_stars {
float: left;
padding: 2px;
}
.ratings_vote {
color: green;
}
.ratings_choice {
font: 10px verdana, sans-serif;
margin: 0 auto 40px auto;
width: 180px;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iva_ratings_choice">
<div id="r1" class="ratings_choice">
<a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a>
<a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a>
<a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a>
<a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a>
<a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a>
</div></div>

<input type="hidden" name="client_ratings" id="client_ratings">




Answer

You want something like this?

jQuery(document).ready(function($) {
  $('.ratings_stars').hover(
    // Handles the mouseover
    function() {
      $('.ratings_stars').removeClass('ratings_over');
      $(this).prevAll().andSelf().addClass('ratings_over');
    }
  );

  $('.ratings_stars').bind('click', function() {
    var star = this;
    $(this).prevAll().andSelf().addClass('ratings_over');
  });
});
.ratings_choice {
  overflow: visible;
  padding: 10px;
  position: relative;
  width: 180px;
  height: 32px;
}
.ratings_stars {
  float: left;
  padding: 2px;
}
.ratings_vote {
  color: green;
}
.ratings_choice {
  font: 10px verdana, sans-serif;
  margin: 0 auto 40px auto;
  width: 180px;
}
.ratings_over {
  color: green;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iva_ratings_choice">
  <div id="r1" class="ratings_choice">
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a>
  </div>
</div>

<input type="hidden" name="client_ratings" id="client_ratings">

or:

jQuery(document).ready(function($) {
  $('.ratings_stars').hover(
    // Handles the mouseover
    function() {
      $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star');
      $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o');
    }
  );

  $('.ratings_stars').bind('click', function() {
    var star = this;
    $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o');
  });
});
.ratings_choice {
  overflow: visible;
  padding: 10px;
  position: relative;
  width: 180px;
  height: 32px;
}
.ratings_stars {
  float: left;
  padding: 2px;
}
.ratings_vote {
  color: green;
}
.ratings_choice {
  font: 10px verdana, sans-serif;
  margin: 0 auto 40px auto;
  width: 180px;
}
.ratings_over {
  color: green;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iva_ratings_choice">
  <div id="r1" class="ratings_choice">
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a>
  </div>
</div>

<input type="hidden" name="client_ratings" id="client_ratings">

or

      $('.ratings_stars').hover(
        // Handles the mouseover
        function() {
          $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star');
          $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o');
        }, function() {
          $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star');

        }
      );

      $('.ratings_stars').bind('click', function() {
        $('.ratings_stars').removeClass('ratings_over');
        $(this).prevAll().andSelf().addClass('ratings_over');
      });
.ratings_choice {
  overflow: visible;
  padding: 10px;
  position: relative;
  width: 180px;
  height: 32px;
}
.ratings_stars {
  float: left;
  padding: 2px;
}
.ratings_vote {
  color: green;
}
.ratings_choice {
  font: 10px verdana, sans-serif;
  margin: 0 auto 40px auto;
  width: 180px;
}
.ratings_over {
  color: green;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iva_ratings_choice">
  <div id="r1" class="ratings_choice">
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a>
  </div>
</div>

<input type="hidden" name="client_ratings" id="client_ratings">

or:

jQuery(document).ready(function($) {
  $('.ratings_stars').hover(
    // Handles the mouseover
    function() {
       $('.ratings_stars').removeClass('ratings_over');
    $(this).prevAll().andSelf().addClass('ratings_over');
     
    }, function() {
        $('.ratings_stars').removeClass('ratings_over');
     

    }
  );

  $('.ratings_stars').bind('click', function() {
    $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star');
      $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o');
  });
});
.ratings_choice {
  overflow: visible;
  padding: 10px;
  position: relative;
  width: 180px;
  height: 32px;
}
.ratings_stars {
  float: left;
  padding: 2px;
}
.ratings_vote {
  color: green;
}
.ratings_choice {
  font: 10px verdana, sans-serif;
  margin: 0 auto 40px auto;
  width: 180px;
}
.ratings_over {
  color: green;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iva_ratings_choice">
  <div id="r1" class="ratings_choice">
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a>
  </div>
</div>

<input type="hidden" name="client_ratings" id="client_ratings">

or:

jQuery(document).ready(function($) {
  $('.ratings_stars').hover(
    // Handles the mouseover
    function() {
      $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star');
       $('.ratings_stars').removeClass('ratings_over');
    $(this).prevAll().andSelf().addClass('ratings_over');
     
    }, function() {
        $('.ratings_stars').removeClass('ratings_over');
     

    }
  );

  $('.ratings_stars').bind('click', function() {
    $('.ratings_stars').find('i').addClass('fa-star-o').removeClass('fa-star');
      $(this).prevAll().andSelf().find('i').addClass('fa-star').removeClass('fa-star-o');
  });
});
.ratings_choice {
  overflow: visible;
  padding: 10px;
  position: relative;
  width: 180px;
  height: 32px;
}
.ratings_stars {
  float: left;
  padding: 2px;
}
.ratings_vote {
  color: green;
}
.ratings_choice {
  font: 10px verdana, sans-serif;
  margin: 0 auto 40px auto;
  width: 180px;
}
.ratings_over {
  color: green;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iva_ratings_choice">
  <div id="r1" class="ratings_choice">
    <a class="star_1 ratings_stars" data-id="1"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_2 ratings_stars" data-id="2"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_3 ratings_stars" data-id="3"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_4 ratings_stars" data-id="4"><i class="fa fa-star-o fa-3x"></i></a>
    <a class="star_5 ratings_stars" data-id="5"><i class="fa fa-star-o fa-3x"></i></a>
  </div>
</div>

<input type="hidden" name="client_ratings" id="client_ratings">

Comments