当前位置： 移动技术网 > IT编程>开发语言>Jquery > 类似淘宝五星点评 ，Jquery实现代码

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

2019年06月10日  | 移动技术网IT编程  | 我要评论 
<!--默认五星，根据鼠标点击判断-->


<!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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网