jquery五角星评分插件示例分享


下面是一个使用jQuery五角星评分插件的简单示例。这个示例假设我们使用的是一个流行的jQuery评分插件,如`jquery-star-rating-plugin`(注意,这里是一个假设的插件名,实际使用时请替换为具体的插件名)。

首先,确保你的HTML文件中已经引入了jQuery库和评分插件的CSS及JS文件。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 五角星评分插件示例</title>
    <!-- 引入jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 引入评分插件的CSS和JS(这里以假设的路径为例) -->
    <link rel="stylesheet" href="path/to/star-rating-plugin.css">
    <script src="path/to/star-rating-plugin.js"></script>
</head>
<body>

<div id="star-rating"></div>

<script>
$(document).ready(function() {
    // 初始化评分插件
    $('#star-rating').rating({
        min: 0, // 最小分数
        max: 5, // 最大分数
        step: 1, // 步长
        size: 'lg', // 星星大小
        showClear: false, // 是否显示清除按钮
        showCaption: true, // 是否显示选中的分数值
        stars: 5, // 星星数量
        // 其他配置...

        // 监听评分变化
        onRate: function(value, caption, event) {
            console.log('您选择的分数是:', value);
        }
    });
});
</script>

</body>
</html>

在上述示例中,我们首先在HTML的``部分引入了jQuery库和评分插件的CSS及JS文件。然后,在``部分,我们定义了一个`div`元素,其ID为`star-rating`,这将作为评分插件的容器。

在`