jQuery五角星评分（end方法）

作者: 马佳乐 | 来源:发表于2022-03-18 08:08 被阅读0次

jQuery五角星评分（end方法）
jQuery串联操作
jQuery.end() 方法
end方法
jQuery滑动星星评分效果
现在开始为 jQuery 编写插件
jQuery
jquery.data()&jquery.extend()
jQuery 链式调用，触发事件
jquery链式调用及动画、触发事件

当鼠标移入空心五角星时，该五角星和其前面的五角星变成实心。鼠标离开时，所有五角星为空心。
当鼠标点击某一空心五角星时，该五角星和其前面的五角星变为实心的。鼠标离开，保持不变。

代码：

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>五角星评分案例</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            .comment {
                font-size: 40px;
                color: red;
            }
            
            .comment li {
                float: left;
            }
            
            ul {
                list-style: none;
            }
        </style>

    </head>

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

</html>
<script src="js/jquery.js"></script>
<script>
    $(function() {

        //1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心，后面的li为空心
        var wjx_k = "☆";
        var wjx_s = "★";
        $(".comment>li").on("mouseenter", function() {
//          //让自己和前面所有的兄弟都变成实心
//          $(this).text(wjx_s).prevAll().text(wjx_s);
//          //后面的li为空心
//          $(this).nextAll().text(wjx_k);

                //与上面代码等价
                $(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);
        });

        //2. 给ul注册鼠标离开事件，让所有的li都变成空心
        $(".comment>li").on("mouseleave", function() {
            $(".comment>li").text(wjx_k);

            //点击事件又离开的事件，找到current，让current和current前面的变成实心就行。
            $("li.current").text(wjx_s).prevAll().text(wjx_s);
        });

        //3. 给li注册点击事件
        $(".comment>li").on("click", function() {
            $(this).addClass("current").siblings().removeClass("current");
        });

    });
</script>