【问题标题】：jRate jquery plug : how to get rating valuejRate jquery 插件：如何获取评分值
【发布时间】：2015-08-04 15:18:51
【问题描述】：

我一直在寻找docs 和another question，这与我在 jRate 星级 jQuery 插件方面所需要的帮助非常接近，但我无法获得我正在寻找的输出。我要做的是在单击按钮时获得数字评级值的输出。

有了这个html：

<div id="ratingContainer">
<div id="currentValue" style="width: 70px; height: 70px; border: 1px solid black; background-color: blue; color: white" >Rating value</div>
<input type="button" id="ratingClicker" value="get rating!" onclick="getRatingValue()" />

</div>

还有这个 javascript：

function getRatingValue(){  
    $(document).ready(function(){       
        $('ratingContainer').jRate({
            onSet: function(rating){
                $('ratingValue').text(rating);
            }
        })
    });
}

function getSimpleStarRatingHtml(){
    $(document).ready(function() {
        $("#ratingContainer").jRate({
            width: 60,
            height: 60,
            startColor: '#3366FF',
            endColor: '#9966FF'
        });
     });
}

当用户拉出选择下拉菜单时，getSimpleStarRatingHtml() 函数会填充 ratingContainer div 中的空星。

getRatingValue 代码抄自我链接到的另一个 StackOverflow 问题。

我意识到这可能是一个基本的 jQuery Q；我对它有点菜鸟。谢谢。

更新

下面的代码确实为我提供了我想要的评分值的输出，但不允许我为星星的外观设置任何选项（高度、颜色等）：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
    function createJrate(){

        $('#rating').jRate({
            onChange: function(rating){
                $('#ratingValue').text(rating);
            }           
        });

    }


</script>   

<style>
    #rating{
        width: 300px;
        height: 140px;
        border: 1px black solid;
    }
</style>
</head>
<body>
<h1>test</h1>
<input type="button" value="create rating" onclick="createJrate()" style="margin-bottom: 15px"/>

<div id="rating"></div><div id="ratingValue"></div>

</body>
</html>

尝试了很多变体，例如在结束选项的右括号后添加评分函数，尝试将$('#ratingValue').jRate() 绑定到var，然后调用函数，如jRate.change(function(){// stuff in here});。

您还有其他想法吗？谢谢

【问题讨论】：

你能把你的代码示例放在 jsfiddle 上吗？

标签： javascript jquery

【解决方案1】：

如果您的逻辑有效并且您只是想更改样式，您是否考虑过简单地覆盖脚本的标准 CSS 以使其以您喜欢的颜色和格式呈现？

【讨论】：

【解决方案2】：

能够通过以这种方式定义 jRate obj 来使其工作...

        $('#rating').jRate({
            onChange: function(rating){
             $('#ratingValue').text("rating " + rating);
            }, 
            startColor: 'blue',
            endColor: 'blue',
            width: 50,
            height: 50
        });

【讨论】：