Star rating system click functionality

Question

I have written a code for rating system star rating system basically, it was all working fine and good the code is

<script type="text/javascript">
(function($){

   $(document).ready(function() {
    var $option = $('.option');
    var $fruit = $('.fruit-name');
    var $last;
    var parent
    $option.click(function() {
        parent=$(this).parents('.comment-form-rating');
        $('.fruit-name',parent).val(this.innerHTML)
    })


$(".starr1").hover(function(){
    parent=$(this).parents('.comment-form-rating');
    $('.starr1',parent).css('color','gold')
    },function(){
    $(".starr1").css("color","#ddd");
  });


$(".starr2").hover(function(){
    parent=$(this).parents('.comment-form-rating');
    $('.starr1',parent).css('color','gold')
    $('.starr2',parent).css('color','gold')
    },function(){
    $(".starr1").css("color","#ddd");
    $(".starr2").css("color","#ddd");
  });

$(".starr3").hover(function(){
    parent=$(this).parents('.comment-form-rating');
    $('.starr1',parent).css('color','gold')
    $('.starr2',parent).css('color','gold')
    $('.starr3',parent).css('color','gold')
    },function(){
    $(".starr1").css("color","#ddd");
    $(".starr2").css("color","#ddd");
    $(".starr3").css("color","#ddd");
  });

$(".starr4").hover(function(){
    parent=$(this).parents('.comment-form-rating');
    $('.starr1',parent).css('color','gold')
    $('.starr2',parent).css('color','gold')
    $('.starr3',parent).css('color','gold')
    $('.starr4',parent).css('color','gold')
    },function(){
    $(".starr1").css("color","#ddd");
    $(".starr2").css("color","#ddd");
    $(".starr3").css("color","#ddd");
    $(".starr4").css("color","#ddd");
  });

$(".starr5").hover(function(){
    parent=$(this).parents('.comment-form-rating');
    $('.starr1',parent).css('color','gold')
    $('.starr2',parent).css('color','gold')
    $('.starr3',parent).css('color','gold')
    $('.starr4',parent).css('color','gold')
    $('.starr5',parent).css('color','gold')
    },function(){
    $(".starr1").css("color","#ddd");
    $(".starr2").css("color","#ddd");
    $(".starr3").css("color","#ddd");
    $(".starr4").css("color","#ddd");
    $(".starr5").css("color","#ddd");
  });

});

})(jQuery);
</script>

but then I have to define a click function for my stars that when user click on star 5 make all star red color --

I defined it like this

$(".starr5").click(function () {
    parent = $(this).parents('.comment-form-rating');
    $('.starr1', parent).css('color', '#FF7777')
    $('.starr2', parent).css('color', '#FF7777')
    $('.starr3', parent).css('color', '#FF7777')
    $('.starr4', parent).css('color', '#FF7777')
    $('.starr5', parent).css('color', '#FF7777')
});

Here's where the Problem occurs - now star become red but on mouse left they become gray again and on mouse over the yellow function of hover starts working - totatly confused How to write further code making it work.

Like Chris Coyier Said "Just Make A JSFiddle" http://jsfiddle.net — iConnor, Jun 06 '13 at 12:16
Please share a jsFiddle of your code. Also, which browser are you working on? I had a similar issue with v26 of Chrome when the debugger console was kept open. — imbecile, Jun 06 '13 at 12:17
The two option of jquery are conflicting - the hover function triger when I mouseleave thus making the red stars disappear. — Cid Ubaid, Jun 06 '13 at 12:35

StormRideR · Answer 1 · 2013-06-06T13:02:46.917

You should just add and remove classes on enter and leave, so when

on mouseenter

.addClass('gold')

on click

.removeClass('gold').addClass('red');

on mouseleave

.removeClass('gold');

And you are doing just fine; Happy Coding.

Star1 example on request:

   <style type="text/css">
        .gold{color: gold;}
        .red{color: #FF7777;}
        .yourDefaultStarClass{color: #ddd;}
    </style>

    <script type="text/javascript">
    (function($){
        $(".starr1").hover(function(){
        parent=$(this).parents('.comment-form-rating');
        $('.starr1',parent).addClass('gold');
        },function(){
        $(".starr1").removeClass('gold');

        });

        $(".starr5").click(function () {
        parent = $(this).parents('.comment-form-rating');
        $('.starr1', parent).removeClass('gold').addClass('red');
        }); 

    });          
    </script>

Can you please explain it a little more by modifying the first starr1 lines and explainging it - It means I have to add the class to my star ? — Cid Ubaid, Jun 06 '13 at 12:45
@CidUbaid code for star 1 provided, you sgould also put some work in usage of class and id in your html — StormRideR, Jun 06 '13 at 13:04

Roko C. Buljan · Answer 2 · 2023-07-27T23:06:45.233

Based on this Stack Overflow answer: Turn number into stars rating which uses plain CSS to create a star rating system, here's the basic JavaScript needed to add just the click functionality:

const starRating = (el) => {
  el.addEventListener("click", (evt) => {
    const pointerX = evt.pageX - el.offsetLeft;
    const rating = Math.max(1, Math.min(5, Math.ceil(pointerX / el.offsetWidth * 5)));
    el.style.setProperty("--rating", rating);
    console.log(rating); // @TODO: Send rating value to server
  });
};

document.querySelectorAll("[style^=--rating]").forEach(starRating);

[style^=--rating]::after {
  content: "★★★★★";
  font-size: 4em;
  white-space: nowrap;
  background: linear-gradient(90deg, #fb0 calc(var(--rating) * 20%), #ddd calc(var(--rating) * 20%));
  background-clip: text;
  -webkit-background-clip: text;
  color: #0000;
  cursor: pointer;
}

<span style="--rating:0"></span>

For the UX colors changing on pointermove, pointerdown; remembering the selection etc. — expand the above with the necessary event listeners, and the CSS with a --color var() like:

const ratingFromPoint = (evt) => {
  const el = evt.currentTarget;
  const pointerX = evt.pageX - el.offsetLeft;
  return Math.max(1, Math.min(5, Math.ceil(pointerX / el.offsetWidth * 5)));
};

const starRating = (el) => {
  const colorDefault = getComputedStyle(el).getPropertyValue("--color");
  const colorClick = "#f00";
  let ratingSelected = 0;
  
  el.addEventListener("pointerdown", (evt) => {
    ratingSelected = ratingFromPoint(evt);
    el.style.setProperty("--color", colorClick);
    el.style.setProperty("--rating", ratingSelected);
  });
  
  el.addEventListener("pointermove", (evt) => {
    evt.preventDefault();
    const ratingHover = ratingFromPoint(evt);
    el.style.setProperty("--rating", ratingHover);
  });
  
  el.addEventListener("pointerleave", (evt) => {
    el.style.setProperty("--color", colorDefault);
    el.style.setProperty("--rating", ratingSelected);
  });

  el.addEventListener("pointerup", (evt) => {
    ratingSelected = ratingFromPoint(evt);
    console.log(ratingSelected); // @TODO: Send ratingSelected value to server
  });
};

document.querySelectorAll("[style^=--rating]").forEach(starRating);

[style^=--rating] {
  --color: #fb0;
  display: inline-block;
  touch-action: none;
  user-select: none;
  cursor: pointer;
}

[style^=--rating]::after {
  content: "★★★★★";
  font-size: 4em;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--color) calc(var(--rating) * 20%), #ddd calc(var(--rating) * 20%));
  background-clip: text;
  -webkit-background-clip: text;
  color: #0000;
}

<span style="--rating:0"></span>

Star rating system click functionality

2 Answers2

Linked