Note that there are some explanatory texts on larger screens.

plurals
  1. POStar rating system - Issue with hover + click
    primarykey
    data
    text
    <p>I have written a code for rating system star rating system basically, it was all working fine and good the code is </p> <pre><code>&lt;script type="text/javascript"&gt; (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); &lt;/script&gt; </code></pre> <p>but then I have to define a click function for my stars that when user click on star 5 make all star red color --</p> <p>I defined it like this </p> <pre><code>$(".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') }); </code></pre> <p>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.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload