jquery로 마우스 아웃 한 후 값을 복원 할 수 있습니까?

Question

문제를 표시하기 위해 fiddle을 생성했습니다.

사용자가 등급을 클릭했지만 사용자가 다시 돌아 왔을 때 선택한 값을 삭제하려는 경우 선택한 값을 설정합니다.

별 모양 영역 밖으로 이동하면 원래 값을 선택하고 싶습니다.

이 옵션을 사용하면 다른 등급을 선택하고 이전에 선택한 등급을 마우스로 표시 할 수 있습니다.

$('.star').click(function(e) { 

e.preventDefault(); 

var rating = this.firstChild.data; 

    if (rating > 0) { 

     $('.star.star_'+rating).addClass('hovered'); 

     // Trying to remove class if hovered but replace selected value when I mouse out 

     /* 
      $('.star_container').hover(function() { 
       $('.star.star_'+rating).removeClass('hovered'); 
      }); 
     */ 

    } 
}); 

나는이 작업을 수행 할 수있는 모든 방법 : 여기

JQuery와 내 시도? 내가 무슨 짓을

Answer 1

http://jsfiddle.net/d4uPX/13/

는 사용자가 요소를 클릭 할 때 참조 할 수 있도록 데이터 값으로 평가를 부착했다. 이 설정되어있어 경우 다음 검사 단지 평가를 저장하는 closured 변수를 사용하여,

$('.star').hover(function() { 
    $('.star').removeClass('hovered'); 
}, function(){ 
    $('.star.star_'+ $('.star_container').data('rating')).addClass('hovered'); 
}); 

Answer 2

내 솔루션 ... 그리고 :

$('.star_container').data('rating', rating); 

그런 다음 여기 호버 기능입니다. 당신을 위해 일해야 (당신은 데이터 요소를 잡아 컨테이너마다 다시 선택할 필요가 없습니다) :

http://jsfiddle.net/d4uPX/17/

var rating; 

$('.star').click(function(e) {   
    e.preventDefault(); 

    rating = this.firstChild.data; 

    if (rating > 0) {   
     $('.star.star_'+rating).addClass('hovered'); 
    } 
}); 

$('.rating_container').hover(
    function() { 
     $('.star.star_'+rating).removeClass('hovered'); 
    }, 
    function() { 
     if(rating){ 
      $('.star.star_'+rating).addClass('hovered'); 
     } 
    } 
);