키보드 포커스를 사용하여 별표 평점을 매기는 방법

Question

나는 별 다섯 개 등급으로 작업하고 있는데, 마우스를 올리거나 클릭하면 작동하지만, keyboArd의 탭 키를 사용하여 작동시키지 못했습니다. 나는 포커스()를 시도했지만 작동하지 않기 때문에 누군가가 올바른 방향으로 나를 가리킬 수 있기를 바랬다.

마우스를 올리면 커서가 켜져있는 별표가 활성화되고 이전 별표 모두에 동일하게 적용됩니다. 예를 들어, 커서가 세 번째 별 위에 올랐다면 세 번째 별, 두 번째 별 및 첫 번째 별이 강조 표시됩니다. 나는 당신이 CSS 선택을 할 것입니다 키보드

<div> 
    <div> 
     <div class="left"> 
      <p><strong>Rate this article</strong></p> 
     </div> 
     <div class="left hide star-rating-message"> 
      <p>Thank you for your rating!</p> 
     </div>  
     <div class="left fivestar"> 
      <div class="left hide average-rating-message"> 
       <p>Average rating</p> 
      </div> 
      <ul> 
       <li><a href="#" class="fivestar-btn-empty"><span class="hide">a</span></a></li> 
       <li><a href="#" class="fivestar-btn-empty"><span class="hide">b</span></a></li> 
       <li><a href="#" class="fivestar-btn-empty"><span class="hide">c</span></a></li> 
       <li><a href="#" class="fivestar-btn-empty"><span class="hide">d</span></a></li> 
       <li><a href="#" class="fivestar-btn-empty"><span class="hide">e</span></a></li> 
      </ul> 

     </div> 
     <div class="clearboth fivestar-comment"> 
      <div class="left hide padding8b comment-rating-message"> 
       <p>Thank you for your feedback!</p> 
      </div>   
     </div> 
    </div> 
</div> 



//on hover 
$(this).hover(function() { 
    $(this).siblings().children('a').addClass('fivestar-btn-filled').removeClass('fivestar-btn-empty'); 
    $(this).children('a').addClass('fivestar-btn-filled').removeClass('fivestar-btn-empty'); 
    $(this).nextAll().children('a').removeClass('fivestar-btn-filled').addClass('fivestar-btn-empty'); 

},function() { 
    $(this).parent().children().children('a').removeClass('fivestar-btn-filled').addClass('fivestar-btn-empty');} 
}); 

Answer 1

를 사용하여 같은 일을 달성하고 싶습니다 : 다음 초점과 설정 CSS 스타일을 사용자가 그들이에있는 알 수 있도록.

Answer 2

업데이트 2 : 내 코드 (마우스 오버)와 내 초점 (포커스)을 결합하십시오. 전체 코드 코드에

var lock = false; // Prevents the hover from working when an element has focus 

// Focus gain 
$("a").focus(function() { 
    lock = true; 
    $(this).parent().siblings().children('a') 
     .addClass('fivestar-btn-filled').removeClass('fivestar-btn-empty'); 
    $(this).addClass('fivestar-btn-filled').removeClass('fivestar-btn-empty'); 
    $(this).parent().nextAll().children('a').removeClass('fivestar-btn-filled').addClass('fivestar-btn-empty'); 
}); 
// Focus lost 
$("a").blur(function() { 
    $(this).parent().siblings().children('a') 
     .removeClass('fivestar-btn-filled').addClass('fivestar-btn-empty'); 
    $(this) 
     .removeClass('fivestar-btn-filled').addClass('fivestar-btn-empty'); 
    lock = false; 
}); 

on jsfiddle (입력 종료), 실행에서 가져가 콜백을 방지 모두의 beggining이 추가 :

if (lock) 
    return;