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 I는 루프 내부 CONSOLE 넣으면 I 무엇을 얻을이다

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

를 왜 I 그것이 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 = $ ('. 스타') toArray(); < - div가 있습니다.

var starArray = $ ('. 별'). children(). toArray(); < - 이미지를 얻었습니다.

Answer 2

당신은 논리에 문제가 있습니다.

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

이 작동 : 당신은 당신이 스타 객체의 자식을 가져가 기능을 얻을 수있는 내부,하지만 당신이 정말로 원하는 것은 당신이 별 개체 :

의 부모의 자녀입니다

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

덕분에 jackwanders에서 언급합니다 : (가), 계층 DOM에서 대상 요소 아래에있는 소스 코드에서 뒤에 표시 단순히 이러한 요소 요소를 발견 .children합니다. 마우스로 가리키는 별 요소에는 자녀가 없습니다. 그러나 형제가 있기 때문에 $ (this) .parent(). children ('. star')과 마찬가지로 $ (this.) .siblings ('. 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와 .each 기능을 사용해보십시오 .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'); 
}); 

첫 번째 기능은 공중 선회 스타의 이전의 모든 형제 자매를 발견하고 만들어 버리는 (뿐만 아니라 공중 선회 스타) 노란색. 두 번째 함수는 컨테이너 요소의 모든 자식 별을 찾고 다시 회색으로 바꿉니다.