[Js]评价中点星星的演示小demo

最新推荐文章于 2022-07-05 19:14:43 发布

码农人生1314

最新推荐文章于 2022-07-05 19:14:43 发布

阅读量1.3k

点赞数 1

分类专栏： js web相关文章标签： javascript 评价星级

本文链接：https://blog.csdn.net/u010989191/article/details/52986002

版权

web相关同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

前言

工作中需要涉及到评价的部分，需要采用星级的方式。特意做了一个演示的demo。其实四五行代码就可以搞定的事，下面直接演示demo。
演示demo:http://download.csdn.net/detail/u010989191/9669331

演示Html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <style type="text/css">
        .redStar{
            color:red;
        }
    </style>
</head>
<body>
<div id="starDiv" style='font-size:40px;color:gray;text-align:center;height:50px;'><span class='fa fa-star' onClick='choseStar(this)'></span><span class='fa fa-star' onClick='choseStar(this)'></span><span class='fa fa-star' onClick='choseStar(this)'></span><span class='fa fa-star' onClick='choseStar(this)'></span><div>
<script type="text/javascript">
    var num = 0;
    function choseStar(starNode){
        //清除所有的红色样式
        $("#starDiv > span").removeClass("redStar");
        //给之前的star添加红色
        var preStarts = $(starNode).prevAll();
        $(preStarts).addClass("redStar");
        //当前的star添加红色
        $(starNode).addClass("redStar");
        //顺便记录选中星星的个数
        num = preStarts.length + 1;
        alert("您选中了"+num+"颗星");
    }
</script>
</body>
</html>

演示效果

这里写图片描述

码农人生1314

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
[Js]评价中点星星的演示小demo

前言工作中需要涉及到评价的部分，需要采用星级的方式。特意做了一个演示的demo。其实四五行代码就可以搞定的事，下面直接演示demo。演示demo:http://download.csdn.net/detail/u010989191/9669331演示Html<!DOCTYPE html><html><head> <title></title> <script type="te
复制链接

扫一扫