单击评级图标后如何显示评级值

Question

我使用了this jQuery rating。 Here is my fiddle。您会看到，如果您将鼠标悬停在评级星形图标上，图标的值将显示在右侧（屏幕截图上的红色标记）。

但是，点击图标后，该值将消失。我希望在点击图标后也能保留该值。我该怎么做？

jQuery的：

$('.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 || '');
  }
});

Answer 1

模糊功能正在从标签中删除文本。您可以通过简单地使用if语句来阻止它。

  if ( type[0].data != '' )  {
      $('.hover-test').html(tip[0].data);
  }

小提琴：http://jsfiddle.net/tvn4Ldmn/10/

如果你想要它，那么只在你点击之后才会保留，你需要检查你是否也点击过。

  if ( type[0].data != '' || has_clicked == false )  {
      $('.hover-test').html(tip[0].data || '');
  }

注意： has_clicked只是一个例子。 ＆＃34;点击＆＃34;逻辑不包含在您的代码或小提琴中。您可以查看班级star-rating-on的星星，以确定用户是否已点击。我相信这会奏效。

更新（基于作者的评论）

如果您希望文本保留最初单击的值，则您将要使用变量。变量应该是＆＃34;后退＆＃34;上面提到的（替换空字符串''）。

您需要一个在您的其他功能范围内的变量。您可以使用全局变量（window.variable_name），但这不是很干净。您也可以将变量放在其他函数之前。阅读有关变量范围的更多信息。

var selected_rating = ''; 

接下来，将该变量用作＆＃34;后退＆＃34;当没有显示悬停文本时。在您点击星号之前，这将是空白的。

$('.hover-test').html(tip[0].data || selected_rating);

最后，还有一些功能可以记住之前点击过哪个星形，以及支持重置按钮。

 // Reset the selected rating:
 $('.rating').on('click', 'div.rating-cancel', function() {
   selected_rating = '';
   $('.hover-test').html('');
});

 // Remember a rating when it is selected:
 $('.rating').on('click', 'div.star-rating', function(e) {
   selected_rating = jQuery(this).find('a').attr('title');
   $('.hover-test').html(selected_rating);
 });

小提琴/演示：http://jsfiddle.net/tvn4Ldmn/16/

Answer 2

看看这个修改过的JSFiddle：http://jsfiddle.net/tvn4Ldmn/1/：

blur: function (value, link) {
    var tip = $('.hover-test');
    var select = $('.rating').find('.star-rating-on:last');
    if (select.length > 0) {
        tip.html(select.find('a')[0].title);
    }
}

您之前的代码正在做什么（就像RadGH提到的那样），正在删除模糊功能中的文本。通过查找点击（选定）评级，并将最后一个星级元素与“星级评分”相关联。 class，您可以在鼠标指针离开评级区域后有效地保留所选值。