jquery - Jquery Star Rating Plugin - 单击后如何使悬停提示粘住

Question

我正在使用这个jQuery Star Rating 插件

它正在工作，但我试图让悬停提示在单击后留在页面上。目前，在您单击并将鼠标移开后它会消失。

<script> 
$(function(){
 $('.hover-star').rating({
  focus: function(value, link){
    var tip = $('#hover-test');
    tip[0].data = tip[0].data || tip.html();
    tip.html(link.title || 'value: '+value);
  },
  blur: function(value, link){
    var tip = $('#hover-test');
    $('#hover-test').html(tip[0].data || '');
  }
});
</script>

<form id="ratingform">
<table width="100%" cellspacing="10"> 
<tr><Td>Hover over the stars and then click</td></tr>
<tr>
<td valign="top" width="">
<div class="Clear">
<div>
<input class="hover-star" type="radio" name="rating" value="1" title="Very poor"/>
<input class="hover-star" type="radio" name="rating" value="2" title="Poor"/>
<input class="hover-star" type="radio" name="rating" value="3" title="OK"/>
<input class="hover-star" type="radio" name="rating" value="4" title="Good"/>
<input class="hover-star" type="radio" name="rating" value="5" title="Very Good"/>
<span id="hover-test" style="margin:0 0 0 20px;"></span>
</td>
</tr>
</table>

Answer 1

您可以使用“回调”函数并使用与“焦点”函数中相同的代码。单击星号时会执行“回调”函数：

$(function(){
 $('.hover-star').rating({
  focus: function(value, link){
    ..
  },
  blur: function(value, link){
    ..
  },
  callback: function(value, link){
    var tip = $('#hover-test');
    tip[0].data = tip[0].data || tip.html();
    tip.html(link.title || 'value: '+value);
  }
});