CODEWITHSUNDEEP
javascripthtml
MintY
MintY

Reputation: 643

How can i use javascript for 5 star rating

am trying to get the 5 star rating using the html5 and css.

What i have done is, i have taken 2 images one is red and green color stars.

inititally the star will be red, when we click the stars to rating, the till the clicked star it should get green.

so i used onclick change image...

here is my code:

<!DOCTYPE html>
<html>
<head>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="images/1.png";
  }
else
  {
  element.src="images/2.png";
  }
}
</script>


</head>
<body>
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">



</body>
</html>

what i need now is, when i click the stars for rating, only the first star is getting changed. instead till the star i clicked should get color changed...

how can i do this???

Upvotes: 1

Views: 8710

Answers (2)

john Smith
john Smith

Reputation: 17906

my last approach was to use a "star mask" png image where the stars are transparent, and behind that container theres a div animating to the percentual representation of the points, i likethe effect und you have very precise amount

function updateStars() {//Animatestars in Searchresult
    $('.stars').each(function (i){ 
        var el = $(this).find('.countSpan').text();
        var amount = (parseFloat(el) * 2)  * 10 ;
        $('.Newstar_bar').eq(i).animate({'width': amount+'%'},1000,'easeOutQuint');
                console.log('updatedStars with amount : '+amount);
    });   
}

html :

<div class="stars" >
  <div class="Newstar_container" style="top:-5px;">
   <div class="Newstar_background"></div>
   <div class="Newstar_bar"></div>
   <div class="Newstar_wrap"></div>
 </div>
<span class="countSpan" style="display:none">2.3</span>
</div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly use jQuery to hook up your events, using on attributes is very outdated. Secondly, you have duplicated id attributes, which is invalid. Finally, you can use prevAll() to get all the preceding elements and update them. Try this:

<div class="rating-container">
    <img class="star" src="images/1.png">
    <img class="star" src="images/1.png">
    <img class="star" src="images/1.png">
    <img class="star" src="images/1.png">
    <img class="star" src="images/1.png">
</div>

$(function() {
    $('.rating-container .star').click(function() {
        $('.rating-container .star').prop('src', 'images/1.png');
        $(this).prevAll('.star').addBack().prop('src', 'images/2.png');
    });
});

Example fiddle

Note the example is changing the class of some div elements as I don't have access to your images, but the logic is the same.

Upvotes: 3

Related Questions