使用jquery rateit插件从星星中获取选定的值

Question

I am using rateit plugin of jQuery for star rating. here is the plugin http://rateit.codeplex.com/

My code:

<link href="rateit.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.rateit.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<div class="rateit" id="rateitval" data-rateit-step="1" data-rateit-resetable='false'></div>

<input type="button" onclick="dis();">

<script type="text/javascript">
    var tooltipvalues = ['bad', 'poor', 'ok', 'good', 'super'];
    var v = 1;
    $("#rateitval").bind('over', function(event, value) {
        v = value;
        $(this).attr('title', tooltipvalues[value - 1]);
    });

    function dis() {
        alert(v);
    }
</script>

I need to get the rate value given in the star as an alert when i click the button. But for my code, it shows me null for all values. Suggest me some solutions.

Answer 1

Try this,it worked for me

<script type="text/javascript">
    $("#rateitval").click(function () {

        var x = $(this).rateit('value');
        console.log(x);
    });
</script>

Answer 2

I Find Cool and simple way to get value from RateIt stars.

I show you code example:

HTML View:

<span id="RateForm_15" class="rateit"></span> // I give rate span unique ID

Jquery Script:

var rateValue = $('#RateForm_15 > div').attr('aria-valuenow'); //hare is a value

Answer 3

Suppose following is your html:

  <div class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32" data-value="0.0" data-step="1.0" data-rateit-min="0" data-rateit-max="5" id="customer_rating"></div

get selected value:

$('#customer_rating').rateit('value');

set value:

$('#customer_rating').rateit('value', 2)

reset:

 $('#customer_rating').rateit('reset');