0

星の評価を行うために使用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>
4

2 に答える 2

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/

于 2013-09-04T08:05:34.770 に答える