五角星评分小例子

最新推荐文章于 2022-09-13 08:40:48 发布

alifj9932

最新推荐文章于 2022-09-13 08:40:48 发布

阅读量116

点赞数

原文链接：http://www.cnblogs.com/chenmiaosong/p/8203420.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: #ff3100;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
            
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            var wjx_none = '☆'; // 空心五角星
            var wjx_sel = '★'; // 实心五角星

            //鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
            $(".comment li").on("mouseenter", function () {
                //当前五角星，和之前的所有五角星，全部是实心的，其他的为空心
                $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
            });

            $(".comment li").on("mouseleave", function () {
                //bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类
                if($("li.current").length === 0){
                    $(".comment li").text(wjx_none);
                }else{
                    //当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心
                    $("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
                }
            });


            //鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
            $(".comment li").on("click", function () {
                //点击哪个li给他加一个类名。清空其他所有的li的类名
                $(this).attr("class","current").siblings("li").removeAttr("class");
            });


        });
    </script>
</head>

<body>

    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

</body>
</html>

转载于:https://www.cnblogs.com/chenmiaosong/p/8203420.html

alifj9932

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五角星评分小例子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> * { padding: 0; ...
复制链接

扫一扫