jQuery toArray 函数以及如何使用其元素

Question

我写了这段代码，这是一个评级系统。我想要发生的是，当你将鼠标悬停在一颗星星上时，它应该触发之前的星星。

每当我将鼠标悬停在星星上时，图片就会发生变化，但它之前的星星不会改变。

             $('.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>

当我将控制台放入循环中时，我得到的更新是:

   <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>

但是为什么我可以看到它在控制台上打开，但在文档上却看不到？

Answer 1

如果您想突出显示所有星星(包括悬停在其上的星星)，并且使用 .prevAll 函数，则不需要数组和循环。

尝试:

$('.star').hover(function() {
    var star = $(this);
    star.add(star.prevAll('.star')).find('img').attr('src','StarsRating/star_yellow.png');
},function() {
    $(this).parent().children('.star').find('img').attr('src','StarsRating/star_grey.png');
});

第一个函数找到悬停星星的所有先前兄弟并将它们(以及悬停星星)变成黄色。第二个函数找到容器元素的所有子星并将它们再次变成灰色。