半颗星评分jquery

半颗星评分一直是网站和应用程序中常见的用户评分系统，可以让用户快速了解他人对产品或服务的评价。在网页开发中，使用JavaScript和CSS实现半颗星评分功能是一种常见的做法。而在本文中，我们将介绍如何利用 jquery 简化这一过程。

添加结构

首先，我们需要创建一个HTML结构来展现半颗星评分。可以使用一个ul元素来包含多个li元素，每个li代表一个星星。另外，我们还需要一个input元素隐藏用户的评分，以便后续的JavaScript代码能够读取用户的选择。

编写jQuery代码

接下来，我们可以编写一些简单的 jquery 代码来处理用户的交互操作。通过监听鼠标的移动和点击事件，我们可以实现用户在星星之间移动以选择评分的功能。

$('#star-rating li').mouseover(function() {
    var index = $(this).index();
    $(this).parent().find('li').each(function(i) {
        $(this).toggleClass('filled', i <= index);
    });
});

$('#star-rating').mouseleave(function() {
    var rating = $('#rating').val();
    $('#star-rating li').each(function(index) {
        var filled = index < Math.floor(rating);
        $(this).toggleClass('filled', filled);
        if(index === Math.floor(rating)) {
            $(this).toggleClass('half-filled', rating % 1 !== 0);
        }
    });
});

$('#star-rating li').click(function() {
    var index = $(this).index();
    var selectedRating = index + ($(this).hasClass('half-filled') ? 0.5 : 1);
    $('#rating').val(selectedRating);
});

添加CSS样式

最后，我们可以通过添加一些CSS样式来美化半颗星评分的外观。通过定义.fill和.half-fill样式类，我们可以为填充和半填充的星星设置不同的颜色和样式。

#star-rating {
    list-style: none;
    padding: 0;
    display: inline-block;
}

#star-rating li {
    display: inline-block;
    font-size: 24px;
    color: #777;
}

#star-rating li i {
    transition: color 0.2s;
}

#star-rating li.filled i {
    color: orange;
}

#star-rating li.half-filled i {
    color: orange;
}

通过以上步骤，我们已经成功地实现了一个简单的 jquery 半颗星评分功能。这种交互式评分系统可以为用户提供更加直观和有趣的评分体验，同时也为网站和应用程序增加了更多的交互性和吸引力。

顶一下

(0)

0%

踩一下

(0)

0%