类似淘宝五星点评，Jquery实现代码

来源：cnblogs　　作者：Yzll　　时间：2019/6/10 13:40:01　　对本文有异议

<!--默认五星，根据鼠标点击判断-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{height:40px;padding:10px;}
        .box ul, .box span{float:left;}
        .bg_star{backgroud:url"//这里放没有背景星星的图片地址"}
        .bg_red{backgroud:url"//这里放有背景星星的图片地址"}
    </style>
</head>
<body>
<div class="box">
    <span >评分</span>
    <ul>
        <li class="bg_star bg_red"></li>
        <li class="bg_star bg_red"></li>
        <li class="bg_star bg_red"></li>
        <li class="bg_star bg_red"></li>
        <li class="bg_star bg_red"></li>
    </ul>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    var index = $(this).index();
    $(this).addClass('bg_red');
    if(index>0){
        $(this).parent().find('li:lt('+index+')').addClass('bg_red');
        $(this).parent().find('li:gt('+index+')').removeClass('bg_red');
    }else{
        $(this).parent().find('li:gt('+index+')').removeClass('bg_red');
    }
</script>
</html>

原文链接：http://www.cnblogs.com/Yzlll/p/10993079.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章