jQWidgets jqxRating改变事件

首先，需要了解一下jqxRating控件和其改变事件。jqxRating是一款jQuery插件，用于创建评分控件。它提供了很多功能，如自定义图标，星星数量，禁用等。改变事件是一种事件，当jqxRating控件的选定值改变时触发。

接下来，我们来详细讲解如何使用jQWidgets的jqxRating控件和其改变事件。

安装和配置

在开始使用jqxRating控件之前，我们需要先下载jQWidgets，并且将必要的文件添加到页面中。具体可以参考jQWidgets的官方文档。

创建jqxRating控件

首先，我们先创建一个简单的jqxRating控件，代码如下：

<div id="jqxRating"></div>

<script>
    $(document).ready(function () {
        $("#jqxRating").jqxRating({ width: 350, height: 35, theme: "classic" });
    });
</script>

这个控件很简单，只需要在一个<div>元素中加上id="jqxRating"属性，然后在js中使用$("#jqxRating").jqxRating()方法创建即可。

绑定改变事件

绑定改变事件的代码只需要加上一个rate事件即可。代码如下：

<div id="jqxRating"></div>

<script>
    $(document).ready(function () {
        $("#jqxRating").jqxRating({ width: 350, height: 35, theme: "classic" });
        $("#jqxRating").on("rate", function (event) {
            alert("当前值为：" + event.value);
        });
    });
</script>

在上面的代码中，我们在jqxRating控件上使用了一个on()方法，来监听了rate事件。当选定值改变时，就会触发这个事件。事件的回调函数中，event.value属性可以获取当前选定的值。

示例说明

下面我们来看两个具体的示例。

示例一

在这个示例中，我们要添加一个星级评价控件，然后实时更新当前选定的星级。

<div id="jqxRating"></div>
<p id="message"></p>

<script>
    $(document).ready(function () {
        $("#jqxRating").jqxRating({
            width: 350,
            height: 35,
            theme: "classic"
        });

        $("#jqxRating").on("rate", function (event) {
            $("#message").text("当前选定的星级为：" + event.value);
        });
    });
</script>

在这个示例中，我们添加了一个<p>标签，用于显示当前选定的星级。在rate事件中，我们使用了jQuery的text()方法，将当前选定的星级显示在了<p>标签中。

示例二

在这个示例中，我们要计算一个学生的考试得分，并且在每次改变选定值时，实时更新考试分数。

<div id="jqxRating"></div>
<p id="message"></p>
<p id="score"></p>

<script>
    $(document).ready(function () {
        $("#jqxRating").jqxRating({
            width: 350,
            height: 35,
            theme: "classic"
        });

        $("#jqxRating").on("rate", function (event) {
            var score = event.value * 10;
            $("#score").text("当前考试得分为：" + score);
        });
    });
</script>

在这个示例中，我们添加了两个新的<p>标签，一个用于显示当前考试得分，一个用于显示当前选定的星级。在rate事件中，我们将当前选定的星级乘以10，得到了当前考试得分，并将其显示在了<p>标签中。

以上就是使用jQWidgets的jqxRating控件和其改变事件的完整攻略了。希望对你有所帮助！