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> 

UPDATE这就是我得到的，当我把控制台内部的循环：

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

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

Answer 1

多数民众赞成答案：

 <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 = $（ '星'）指定者（）; < - 我得到了div

var starArray = $（'。star'）。children（）。toArray（）; < - 现在我得到的图像

Answer 2

你有一个问题，你是逻辑。在里面你会悬停功能，你会得到一个明星对象的孩子，但你真正想要的是明星的对象:)

的父母的孩子你有：

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

下工作：

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

由于从jackwanders评价： 。儿童（）发现，在层次在DOM中目标元件的下方，而不是简单后中出现的源代码的那些元件的元件。你盘旋的明星元素没有孩子。然而，它有兄弟姐妹，所以$（this）.siblings（'。star'）会起作用，$（this）.parent（）。children（'。star'）

而且这也必须进行更改：

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

到

$('.star').children().toArray(); 

也;而不是：如果你想强调所有的星星直至并包括恒星正在上空盘旋，数组和循环不是http://api.jquery.com/each/

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

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

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


}); 

Answer 3

：

 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的。每个功能如果您使用.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'); 
}); 

第一个函数查找悬停明星之前的所有兄弟姐妹，并把它们（以及悬停星）黄色。第二个函数查找容器元素的所有子星，并将它们变成灰色。