jQuery toArray函数及其元素的使用

我写了这段代码，这是一个评级系统。 我想发生的是当你在一颗星星上盘旋时，在它触发之前的星星

每当我在一颗星星上盘旋时，画面就会发生变化，但之前的星星不会变化

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

Html:

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

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

​…​​
newEmptyPHPWebPage.php:41
​…​​
newEmptyPHPWebPage.php:41
​…​

---

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

您的逻辑有问题。在悬停函数中，可以得到星形对象的子对象，但真正需要的是星形对象父对象的子对象：）

你有：

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

可以工作：

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

感谢jackwanders的评论： .children（）查找DOM中层次结构低于目标元素的元素，而不仅仅是源代码中出现在目标元素之后的元素。你悬停在上面的星元素没有子元素。但是，它确实有同级，所以$（this）.sides（'.star'）可以工作，$（this.parent（）.children（'.star'）也可以工作

这也必须改变：

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

---

如果要高亮显示所悬停星星之前（包括该星星）的所有星星，则如果使用

.prevAll

功能，则不需要阵列和循环

尝试：

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

答案如下：

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

$（'.star'）。悬停（函数（）{
$（this.children（）.attr（'src'，'StarsRating/star_yellow.png'）；
var count=$（this.attr（'data-count'）；
**var starArray=$（'.star'）.children（）.toArray（）**
对于（i=0；ii真的，不认为这有什么关系当您选择星号的子项而不是包含星号的容器时，您的代码有逻辑错误。我已更新了我的答案是的，它有。
.children（）
在DOM中查找层次结构低于目标元素的元素，而不仅仅是源代码中出现在目标元素之后的元素。您悬停在上面的星型元素没有子元素。但是它确实有同级元素，因此
$（this）。同级元素（'.star'）
可以工作，同级元素（'.star'）也可以工作，
$（this.parent（）.children（'.star'））
这很接近，但错了。我要做的是将toArray行更改为：var starArray=$（'.star'）.children（）.toArray（）；…这意味着我将不获取div，而是获取图像感谢您的帮助。我将更新答案以反映您的洞察力。是吗？您是指设置图像的
src
，而不是div容器吗？我的解决方案也是这样（
.find（'img'）
）。它还避免了创建for循环的需要，因为
.prevAll
函数很好地处理了您尝试实现的功能。
$('.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');
        }

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

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

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


});

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

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