javascript - 如何在点击评级图标后显示评级值

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

fiddle :http://jsfiddle.net/tvn4Ldmn/10/

如果您希望值仅在单击后保留，则需要检查您是否也单击了。

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

注意: has_clicked 只是一个示例。 “点击”逻辑不包含在您的代码或 fiddle 中。您可以查看类 star- rating-on 的星星来确定用户是否点击了。我相信这会起作用。

更新(基于作者的评论)

如果您希望文本保留最初单击的值，则需要使用变量。该变量应该是上面提到的“后退”(替换空字符串，'')。

您需要一个位于其他函数范围内的变量。您可以使用全局变量 (window.variable_name)，但这不是很干净。您也可以将变量放在其他函数之前。了解变量范围以获取更多信息。

var selected_rating = ''; 

接下来，使用该变量作为没有显示悬停文本时的“后备”。在您单击星星之前，该区域将是空白的。

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

fiddle /演示:http://jsfiddle.net/tvn4Ldmn/16/