jquery简单几句代码实现星级评论效果

我前面博客写过一个星级评论的原生写法，非常复杂，今天就通过jquery来写一个简单的星级点亮的效果，来看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .ct-star {
        display: inline-block;
        margin: 0 1px;
        width: 19px;
        height: 19px;
        background: url(img/stars.png) no-repeat;
        vertical-align: -2px;
        cursor: pointer;
    }
    .ic-star-off {
        background-position: -39px 0;
    }
</style>

</head>
<body>
    <span class="star">
        <b class="ct-star  ic-star-off"></b>
        <b class="ct-star  ic-star-off"></b>
        <b class="ct-star  ic-star-off"></b>
        <b class="ct-star  ic-star-off"></b>
        <b class="ct-star  ic-star-off"></b>
    </span>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        $(".star b").on("mouseenter",function(){
            $(this).removeClass("ic-star-off").prevAll().removeClass("ic-star-off");
        });
        $(".star").on("mouseleave",function(){
            $(this).children().addClass("ic-star-off");
            $("b.curr").removeClass("ic-star-off").prevAll().removeClass("ic-star-off");
        });
        $(".star b").on("click",function(){
            $(this).addClass("curr").siblings().removeClass("curr")
        })
    })
</script>
</html>

效果图就不展示了，将代码拷贝自己可以试试哦，一定要注意自己引用文件的路径！好了，今天就写这么一个简单的小例子。

jquery简单几句代码实现星级评论效果

相关推荐