我用过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 || '');
}
});
最佳答案
模糊功能正在从标签中删除文本。您只需使用 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/
关于javascript - 如何在点击评级图标后显示评级值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25412059/