JavaScript Star Rating in Jquery star rating jquery codepen,star rating jquery plugin,star rating

I want a star rating system please check the JSFiddle .I want to stick the rating on mouse click.

HTML:

<div class="rating-star rating-star-off" data-value="0"></div>
<div class="rating-star rating-star-off" data-value="1"></div>
<div class="rating-star rating-star-off" data-value="2"></div>
<div class="rating-star rating-star-off" data-value="3"></div>
<div class="rating-star rating-star-off" data-value="4"></div>
</div>

CSS:

.rating-star{width:25px;height:25px;float:left;margin-right:5px;}
.rating-star-off{background:#eee url(star-off.svg) no-repeat;}
.rating-star-on{background:#000 url(star-on.svg) no-repeat;}

jQuery:

$(function(){

  $(".rating-star").click(function(e){
    $(this).prevAll().andSelf().addClass('rating-star-on');
    $(this).nextAll().removeClass('rating-star-on');
  });
  $(".rating-star").hover(function(){
    $(this).prevAll().andSelf().addClass('rating-star-on');
    $(this).nextAll().removeClass('rating-star-on');
  });
  $(".rating-star").mouseout(function(){
    $(".rating-star").removeClass('rating-star-on'); 
  });
});

http://jsfiddle.net/piyush_dezi/a67gv2o7/

Thanks in advance for your help.

Answer:1

One way is to add another class for selected to your css rules

.rating-star-on, 
.rating-star-selected
    {background:#000 url(star-on.svg) no-repeat;}

And change the click handler to add this selected class.

$(".rating-star").click(function(e){
    $(this).prevAll().andSelf().addClass('rating-star-selected');
    $(this).nextAll().removeClass('rating-star-on');
});

You will likely need to make some adjustments if you want user to be able to change their rating also

DEMO

Answer:2

Add this line to CSS:

.rating-star-hover {background:#000 url(star-on.svg) no-repeat;}

Update JS:

$(this).prevAll().andSelf().removeClass('rating-star-off').addClass('rating-star-on');
$(this).nextAll().removeClass('rating-star-on');
});

$(".rating-star").hover(function(){
  $(this).prevAll().andSelf().addClass('rating-star-hover');
  $(this).nextAll().removeClass('rating-star-on');
});

$(".rating-star").mouseout(function(){
    $(".rating-star").removeClass('rating-star-hover'); 
});
Answer:3

The reason why it's not getting executed is that when we click on the div, the rating-on class is added but as we mouseout the class is been removed. So the rating class is not changed. You can also do this using an boolean variable. Check this : 

    `http://jsfiddle.net/bandhavya/we3mx6vt/`
Answer:4

First your click event add classes to highlight the stars after it mouse out event remove these classes. In mouse click event unbind mouse out event so it will not remove classes from your stars. Also instead of using anonymous mouse out function use name function so your can bind it again for other starts.

   $(function(){
$(".rating-star").mouseout(mouseOutFunction);

function mouseOutFunction(){
$(".rating-star").removeClass('rating-star-on'); 
}


$(".rating-star").click(function(e){
$(this).prevAll().andSelf().addClass('rating-star-on');
$(this).nextAll().removeClass('rating-star-on');
$(".rating-star").bind( "mouseout", mouseOutFunction);
$(this).unbind( "mouseout" );
});

$(".rating-star").mouseenter(function(){

  $(this).prevAll().andSelf().addClass('rating-star-on');
  $(this).nextAll().removeClass('rating-star-on');
});

});
Answer:5

How to loop through properties of objects inside of an array within a React component?

Here is my Parent component's render function: render() { const users = [ 'tom': { phone: '123', email: 'hotmail' }, 'rob': { phone: '321', ...

Here is my Parent component's render function: render() { const users = [ 'tom': { phone: '123', email: 'hotmail' }, 'rob': { phone: '321', ...

  1. loop through properties javascript
  2. loop through properties of object c#
  3. loop through properties of a class c#
  4. loop through properties java
  5. loop through properties typescript
  6. loop through properties of dynamic object c#
  7. loop through properties of object typescript
  8. loop through properties of object powershell
  9. loop through properties of object vb.net
  10. loop through properties file java
  11. loop through properties of object
  12. loop through properties
  13. loop through properties of json object
  14. loop through properties of object java
  15. loop through properties of object php
  16. loop through properties of object js
  17. loop through properties powershell
  18. loop through properties in a class
  19. loop through properties reflection c#
  20. loop through properties of json object c#

AngularJS router-ui resolve exception

I have following parent route in my app: .state('app',{ url: '/app', templateUrl: 'views/app.html', resolve: loadSequence('modernizr','moment'), ...

I have following parent route in my app: .state('app',{ url: '/app', templateUrl: 'views/app.html', resolve: loadSequence('modernizr','moment'), ...

  1. angularjs router resolve
  2. angularjs router resolve reject
  3. angularjs router resolve service
  4. angularjs router resolve not working
  5. angularjs router resolve data
  6. angularjs router resolve factory
  7. angularjs routing resolve
  8. angularjs routing resolve example
  9. angularjs routing resolve service
  10. angularjs ui router resolve
  11. angularjs ui router resolve redirect
  12. angularjs ui router resolve promise
  13. angularjs ui router resolve example
  14. angularjs ui router resolve not working
  15. angularjs ui-router resolve unknown provider
  16. angularjs ui router resolve authentication example
  17. angularjs router state resolve
  18. angularjs ui-router resolve parameter
  19. angularjs ui router resolve authentication
  20. angularjs ui router resolve data

retrieve php sql values for chartjs into jquery/ajax

Im trying to use http://www.chartjs.org/ to create a pie chart while retrieve database values. Following are my codes callactiveinactive.php <?php require connectDB.php; $sql = "SELECT ...

Im trying to use http://www.chartjs.org/ to create a pie chart while retrieve database values. Following are my codes callactiveinactive.php <?php require connectDB.php; $sql = "SELECT ...

axios delete method not working in react

i have tried to perform axios.delete operation in react, unfortunately it is not working, please help me to solve this issue, export function DeletePatient(token,deletePatient) { return axios....

i have tried to perform axios.delete operation in react, unfortunately it is not working, please help me to solve this issue, export function DeletePatient(token,deletePatient) { return axios....

  1. axios delete method not allowed
  2. axios delete method body
  3. axios delete method
  4. axios delete request method options
  5. laravel axios delete method not allowed
  6. axios delete 405 method not allowed
  7. axios js delete method