jQuery Javascript ratings : 사용자가 커서를 끌 때 등급이 다시 나타나게합니다.

Question

커서를 올려 놓았을 때 별 모양을 가리키면 jQuery 코드가 표시됩니다. 문제는 일단 커서를 꺼낸 후에도 커서가 무엇을 표시했는지 (그리고 원래의 등급은 보이지 않음)입니다. 어떻게하면 커서가 제거되었는지 확인한 다음 원래의 등급을 표시 할 수 있습니까?

$(document).ready(function() { 


    $("[id^=rating_]").hover(function() { 


     rid = $(this).attr("id").split("_")[1]; 
     $("#rating_"+rid).children("[class^=star_]").children('img').hover(function() { 

      $("#rating_"+rid).children("[class^=star_]").children('img').removeClass("hover"); 

      /* The hovered item number */ 
      var hovered = $(this).parent().attr("class").split("_")[1]; 

      while(hovered > 0) { 
       $("#rating_"+rid).children(".star_"+hovered).children('img').addClass("hover"); 
       hovered--; 
      } 

     }); 
    }); 

    $("[id^=rating_]").children("[class^=star_]").click(function() { 

     var current_star = $(this).attr("class").split("_")[1]; 
     var rid = $(this).parent().attr("id").split("_")[1]; 

     $('#rating_'+rid).load('http://localhost:8888/fivestars/send.php', {rating: current_star, id: rid}); 

    }); 




}); 

편집 :

JQuery와에 따라 같이 호버 이벤트가 작동

<div id="rating_3"> 
      <span class="star_1"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /></span> 
      <span class="star_2"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /></span> 
      <span class="star_3"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" class="hover" /></span> 
      <span class="star_4"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" /></span> 
      <span class="star_5"><img src="http://localhost:8888/fivestars/star_blank.png" alt="" /></span> 
     </div> 

Answer 1

업데이트 :

선택한 등급은 ratings_x 요소의 data()에 저장되고, 당신은 평가 영역을 떠날 때 검색됩니다.

$('[class^=star_]').mouseenter(
     function() { 
      if($(this).parent().data('selected') == undefined) { 
       var selectedStar = $(this).parent().find('.hover').length - 1; 
       $(this).parent().data('selected', selectedStar) 
      } 
      $(this).children().addClass('hover'); 
      $(this).prevAll().children().addClass('hover'); 
      $(this).nextAll().children().removeClass('hover'); 
     }); 

    $('[id^=rating_]').mouseleave(
     function() { 
      var selectedIndex = $(this).data('selected') 
      var $selected = $(this).find('img').eq(selectedIndex).addClass('hover').parent(); 
      $selected.prevAll().children().addClass('hover'); 
      $selected.nextAll().children().removeClass('hover'); 
    }); 

---

hover()의 적절한 사용은 두 가지 기능을 함께 : 마우스가 요소를 벗어날 때

$('#myElement').hover(
    function() { 
     // mouseenter code 
    }, 
    function() { 
     // mouseleave code 
    } 
); 

를 사용하여 두 번째 기능은 적절한보기를 설정할 수 있습니다.

Answer 2

: 사용자 코드에서

$("[id^=rating_]").hover(function() { 
//IN 
}, 
function() { 
//OUT 
//Your code when the cursor is out here. 
}); 

를, 내가 결론을 내릴 수있는 3 성급 호텔 인 뭔가를 HTML 출력 귀하의 아웃 코드는 다음과 같이 보일 것입니다 :

$("id^=rating_").children("[class^=star_]").children('img').removeClass("hover");