在互联网上，星级评价系统是一种常见的用户反馈机制，它可以帮助网站或应用收集用户对产品或服务的满意度。使用jQuery可以轻松实现一个美观且功能齐全的星级评价系统。以下是一步到位的jQuery星级评价系统的源代码大揭秘。

1. 准备工作

在开始之前，请确保您的项目中已经包含了jQuery库。您可以从jQuery的官方网站下载最新版本的jQuery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. HTML结构

首先，我们需要创建一个基本的HTML结构，其中包括一个用于显示星级的容器。

<div id="star-rating">
    <span class="star">&#9733;</span>
    <span class="star">&#9733;</span>
    <span class="star">&#9733;</span>
    <span class="star">&#9733;</span>
    <span class="star">&#9733;</span>
</div>

3. CSS样式

接下来，我们为星级添加一些基本的样式。这包括颜色、大小和鼠标悬停效果。

#star-rating .star {
    font-size: 2em;
    color: grey;
    cursor: pointer;
}

#star-rating .star:hover,
#star-rating .selected {
    color: gold;
}

4. JavaScript逻辑

现在，我们将使用jQuery来添加交互逻辑。以下代码将允许用户点击星级来设置评分。

$(document).ready(function() {
    $('#star-rating .star').on('mouseover', function() {
        var maxStars = $('#star-rating .star').length;
        var currentStar = $(this).index() + 1;
        $('#star-rating .star').each(function() {
            $(this).css('color', 'grey');
            if ($(this).index() < currentStar) {
                $(this).css('color', 'gold');
            }
        });
    });

    $('#star-rating .star').on('click', function() {
        var maxStars = $('#star-rating .star').length;
        var currentStar = $(this).index() + 1;
        $('#star-rating .star').each(function() {
            $(this).css('color', 'gold');
            if ($(this).index() >= currentStar) {
                $(this).css('color', 'gold');
            } else {
                $(this).css('color', 'grey');
            }
        });
    });
});

5. 功能说明

  • 当鼠标悬停在星级上时，星级会逐渐变为金色，表示当前悬停的星级。
  • 当用户点击一个星级时，所有的星级都会变为金色，直到点击的星级为止。
  • 星级颜色变化后，可以通过JavaScript获取当前星级来执行其他操作，例如提交评分。

6. 使用示例

以下是如何使用这个星级评价系统的一个简单示例：

// 假设用户点击了第三个星级
$('#star-rating .star').eq(2).trigger('click');

// 获取当前星级
var currentRating = $('#star-rating .star').index($('.selected'));
console.log('Current rating: ' + currentRating);

通过以上步骤，您就可以轻松地创建一个jQuery星级评价系统。这个系统不仅易于使用，而且可以根据您的需求进行扩展和定制。