如何使星级评定工作与键盘焦点

Question

我正在一个五星评级，我已经开始工作，单击以及悬停然而，我无法让它使用keyboArd上的选项卡上工作。我希望有人能指出我正确的方向，因为我也尝试过focus（），但它不起作用。

鼠标悬停时，光标所在的星星变为活动状态，同样适用于所有以前的星星。例如，如果光标悬浮在第三颗恒星上，第三颗恒星，第二颗恒星和第一颗恒星将会受到高亮显示。我想用键盘

<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选择器来实现同样的事情：焦点，然后设置CSS样式，这样用户知道他们就可以了。

Answer 2

更新2：将您的代码（悬停）与我的（焦点）相结合;完整的代码on jsfiddle

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; 
}); 

在你的代码，防止运行悬停回调，在两者的beggining加入这个（进入和退出）：

if (lock) 
    return;