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');
});

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

Answer 2

你的逻辑有问题。在你的悬停函数中，你得到一个星对象的子对象，但你真正想要的是星对象的父对象的子对象:)

你有：

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

可以工作：

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

感谢 jackwanders 的评论： .children() 查找在 DOM 中分层低于目标元素的元素，而不仅仅是在源代码中出现在目标元素之后的那些元素。您悬停的星形元素没有子元素。但是，它确实有兄弟姐妹，所以 $(this).siblings('.star') 会起作用，就像 $(this).parent().children('.star')

这也必须改变：

 var starArray = $('.star').toArray();

到

$('.star').children().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
            $(starArray[i]).attr('src','StarsRating/star_yellow.png');
        }

试试 jquery .each 函数：http://api.jquery.com/each/

$("#ratingStars").each(function(index) {

    if( index >= count ) 
        return false; // break

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


});

Answer 3

这就是答案：

        <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();

var starArray =$('.star').children().toArray();