javascript - jQuery - 需要在鼠标离开时删除值，而不是在鼠标进入时

Question

我jquery.rateit.min.js用来进行星级评定，我需要考虑以下 2 个条件：

1. 在鼠标离开时，应该删除该值（作为评级好、平均等）。
2. 单击星号并移除鼠标后，不应删除该值。

下面是代码：

<input type="range" min="0" max="5" value="0" step="1" id="backing1">
<div class="rateit" id="rateitHover" data-rateit-backingfld="#backing1" data-rateit-step="1" > 
    <span class="tooltip" style="float:right; padding-left:10px;"></span>
</div>

<script type="text/javascript">
    var tooltipvalues = ['Bad', 'Poor', 'Average', 'Good', 'Excellent'];

    $("#rateitHover").bind('over', function (event, value) {
        $('.tooltip').text(tooltipvalues[value - 1]);
    });

    $("#rateitHover").bind('reset', function () {
        $('.tooltip').text(''); 
    });

    $("#rateitHover").bind('rated', function (event, value) {
        $('.tooltip').text('R: ' + tooltipvalues[value - 1]);
    });
</script>

Answer 1

只需为它使用一个标志：

var hasBeenClicked = false;

$('.stars').on('mouseleave', function(e) {
    if(hasBeenClicked) {
        //let the stars value
    } else {
        //reset the stars
    }
});

$('.stars .star').on('click', function() {
    //set the rating
    hasBeenClicked = true;
});

Answer 2

这是你想要的？我所做的只是将一个函数绑定到 mouseleave 事件。

$('#rateitHover').bind('mouseleave', function() {
    var v = $('#rateitHover').rateit('value');
    if (v == 0) {
        $('.tooltip').html('');
    } else {
        $('.tooltip').html('R: ' + tooltipvalues[v - 1]);
    }
});

这是一个 JSFiddle 可以看到它的实际效果：http: //jsfiddle.net/9xrkr/