五角星效果实现

1.电商项目，评论区五角星功能实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02五角星案例</title>
    <style>
        * { margin: 0; padding: 0; }
        ul { list-style: none; }
        .comment {
            color: red;
            /*font-size: 0;*/

            /*设置字符间距*/
            /*letter-spacing: -13px;*/

            /*设置单 词间距 I am a teacher */
            /*word-spacing: -13px;*/
        }

        .comment li {
            float: left;
            /*display: inline-block;*/
            font-size: 40px;

        }
    </style>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            var wjx_sel = "★",
                wjx_none = "☆";

            $(".comment").on("mouseenter", "li", function(){
                //prevAll前面所有的兄弟节点
                // $(this).text(wjx_sel).prevAll().text(wjx_sel);

                // $(this).nextAll().text(wjx_none);
                //当执行的jQuery 链式编程断掉的时候，如果能把链再链上就好了。

                //end()可以结束当前调用的链。 恢复上一级的调用链。
                $(this).text(wjx_sel)
                    .prevAll()
                    .text(wjx_sel)
                    .end()    //结束prevAll，回到 $(this)链
                    .nextAll()
                    .text(wjx_none);

                //第二步： 记录一下用户点击的那个五角星
                //给点击的li标签添加一个样式类                
            }).on("click","li", function(){
                $(this).addClass('clicked').siblings().removeClass('clicked');
            }).on("mouseleave",function(){
                //鼠标移开的时候，先给所有的li标签添加一个空心的 五角星

                //隐式迭代
                $(".comment li").text(wjx_none);

                var t = $(".comment li").text();


                $(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end()
                .nextAll().text(wjx_none);
                //第三步： 当鼠标移开评分控件的时候，把click（包括自己）之前的五角星全部变成实心的，后面的变成空心。
            });            

        });
    </script>
</head>
<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
</body>
</html>

 

posted @ 2017-01-16 23:53  Mr_伍先生  阅读(516)  评论(0)    收藏  举报