jQuery 创建星级评分程序

简介

星级评分程序是一个常见的用户评价工具，可以用于各类网站及应用程序中。本文将介绍如何使用jQuery框架创建一个简单的星级评分程序，以便开发者可以快速实现此功能。

功能

本程序将使用一组互动的五角星图标，允许用户根据其选择的星星数量给出一个1-5的评分。

准备工作

在实现这个功能之前，您需要先在您的网站或应用程序中集成jQuery框架。

你可以通过以下代码在你的程序中添加jQuery库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

创建HTML标记

我们将使用以下HTML标记来创建星级评分程序：

<div class="rating">
    <span class="star" data-value="1"></span>
    <span class="star" data-value="2"></span>
    <span class="star" data-value="3"></span>
    <span class="star" data-value="4"></span>
    <span class="star" data-value="5"></span>
</div>
<input type="hidden" name="rating_value" id="rating_value" value="">

在上述标记中，我们首先创建了一个名为“rating”的div元素，其中包含五个使用CSS更改样式的span元素。每个星级元素都将带有一个“data-value”属性，其值为其对应星星的值（1-5）。最后一个元素是隐藏的input元素，用于存储用户选择的星星值。

创建JavaScript功能

在使用jQuery创建星级评分程序时，我们将为每个星级元素附加一个单击事件。当用户点击星级元素时，将会发生以下事情：

1. 将代码执行到与此星星元素相对应的代码行。

2. 此代码行将获取星级元素的“data-value”属性。

3. 所有低于或等于被选择的星级元素的星级元素都将被着色为黄色，并且高于它们的星级元素都将恢复成灰色。

4. 将选择的星级值存储到隐藏的input元素中。

为此，我们将编写以下JavaScript代码：

// 为每个星星元素添加单击事件
$('.star').click(function(){
    var selectedStar = $(this).attr('data-value');

    // 根据选择的星星值设置颜色
    $('.star').each(function(){
        if($(this).attr('data-value') <= selectedStar){
            $(this).addClass('selected');
        }else{
            $(this).removeClass('selected');
        }
    });

    // 将选择的星星值存储到隐藏的input元素中
    $('#rating_value').val(selectedStar);
});

在上面的代码中，我们首先选择所有星级元素，并为每个元素添加了一个单击事件。当单击事件触发时，它将执行以下逻辑：取到单击事件对应的星级元素上的“data-value”属性，将它赋值给变量“selectedStar”；遍历每个星级元素。如果某个星级元素的“data-value”属性值小于或等于“selectedStar”变量的值，那么就将此星级元素的类名更改为“selected”，否则移除它。最后，将所选的星级值存储在隐藏的输入元素中。

CSS样式

最后，我们需要添加CSS样式来美化我们的星级评分程序。以下是我们样式规则的示例：

.rating .star {
    color: #ddd;
    font-size: 30px;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
}
.rating .star.selected,
.rating .star:hover {
    color: #ffce00;
}

在上面的代码中，我们首先选择了“rating”div中的所有星级元素，并给它们分配了一些样式。当用户单击星级元素时，“selected”类将添加到所选元素中。我们还为星级元素添加了一个悬停样式。

至此，我们已经完成了一个简单的星级评分程序。

结论

在本文中，我们介绍了如何使用jQuery框架创建星级评分程序。我们使用HTML，CSS和JavaScript编写了完整的示例代码。该程序将允许用户根据其选择的星星数量给出1到5的评分。这个程序是非常适合添加到一个博客或者电商网站中，以便用户能够评价所购买的产品。