Question

I wrote this code, which is a rating system.
What I want to happen is when you hover over a star, the stars before it should trigger.

A picture change happens whenever I hover over a star, but the stars before it dont change.

             $('.star').hover(function(){

            $(this).children().attr('src','StarsRating/star_yellow.png'); 

            var count=$(this).attr('data-count');
            var starArray =$('.star').toArray();


            for(i=0; i<count; i++){
                //The problem is here. the attributes of the stars should change to star_yellow.png..but they dont

console.log(starArray[i]);
$(starArray[i]).attr(‘src’,’StarsRating/star_yellow.png’);
}

         },function(){
            $(this).children().attr('src','StarsRating/star_grey.png'); 
         });

Html:

        <div id="ratingStars">
        <div class="star" data-count="1">
            <img src="StarsRating/star_yellow.png"/>
        </div>
         <div class="star" data-count="2">
             <img src="StarsRating/star_grey.png"/>
        </div>
         <div class="star" data-count="3">
            <img src="StarsRating/star_grey.png"/>
        </div>
         <div class="star" data-count="4">
            <img src="StarsRating/star_grey.png"/>
        </div>
         <div class="star" data-count="5">
            <img src="StarsRating/star_grey.png"/>
        </div>

UPDATE THAT IS WHAT I GET WHEN I PUT THE CONSOLE INSIDE THE LOOP:

   <div class=​"star" data-count=​"1" src=​"StarsRating/​star_yellow.png">​…​</div>​
newEmptyPHPWebPage.php:41
<div class=​"star" data-count=​"2" src=​"StarsRating/​star_yellow.png">​…​</div>​
newEmptyPHPWebPage.php:41
<div class=​"star" data-count=​"3" src=​"StarsRating/​star_yellow.png">​…​</div>

But why I can see that it switched on teh console, but not on the document?

Answer 1

Thats the answer:

        <script type="text/javascript">
         $('.star').hover(function(){
            $(this).children().attr('src','StarsRating/star_yellow.png'); 
            var count=$(this).attr('data-count');
            **var starArray =$('.star').children().toArray();**

            for(i=0; i<count; i++){

                var current= $(starArray[i]);
               current.attr('src','StarsRating/star_yellow.png');
            }

         },function(){
             $('.star img').attr('src','StarsRating/star_grey.png');


         });
    </script>

var starArray =$(‘.star’).toArray(); <–I got the divs

var starArray =$(‘.star’).children().toArray();<– Now I got the images