jQuery_五角星评分/链式编程

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/02/ 15:19-->
<!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;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
</head>

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

<script src="jquery-1.12.4.js"></script>
<script>
   $(function () {
     // 需求1: 鼠标移入到li标签上,当前li标签和他之前的li标签显示 实心五角心,后面的li显示 空心五角心.
     // 需求2: 鼠标离开li,所有的li都变成空心.
     // 需求3: 点击li,鼠标离开后,刚才点击的那个li和之前的li都变成 实心五角心,后面 空心五角心.

       /**
        * prev(): 上一个兄弟
        * prevAll(): 之前所有的兄弟
        * next(): 下一个兄弟
        */

       // 声明一个变量, 记录这个实心五角星
       var solid_star = '★';
       var hollow_star = '☆';


    // 给 li 注册 事件
    $('.comment > li').on('mouseenter', function () {
        // 需求1: 鼠标移入到li标签上,当前li标签和他之前的li标签显示 实心五角心,后面的li显示 空心五角心.
        // $(this).text(solid_star).prevAll().text(solid_star).nextAll().text(hollow_star);
        $(this).text(solid_star).prevAll().text(solid_star);
        $(this).nextAll().text(hollow_star);
    }).on('mouseleave', function () {
        // 需求2: 鼠标离开li,所有的li都变成空心
        $('.comment > li').text(hollow_star);
        // 在鼠标离开的时候, 获取刚才点击的那个li
        $('.comment > li[clickCurrent]').text(solid_star).prevAll(solid_star);


    }).on('click', function () {
        // 需求3: 点击li,鼠标离开后,刚才点击的那个li和之前的li都变成 实心五角心,后面 空心五角心
        // 给鼠标当前点击的li做一个记号,为什么要做一个记号,是因为鼠标离开的时候,要知道你刚才点击的是哪一个li
        // 给当前鼠标点击的这个li添加一个独一无二的属性
        // 方式1: 通过索引, 可行
        // 方式2: 给当前 鼠标点击的 li, 添加一个 独一无二的属性, 之后 可以通过这个属性来判断
        $(this).attr('clickCurrent', 'current').siblings().removeAttr('clickCurrent');
    });
       
   });
</script>
</body>
</html>