更新

Question

我一直在寻找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，然后调用该函数，如{{ 1}}。

您可能有其他想法吗？感谢

Answer 1

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

Answer 2

能够通过这种方式定义jRate obj来实现它...

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

jRate jquery插件：如何获得评级值

更新

2 个答案: