前端学习日记：jquery的preAll-nextAll-attr-sibling-removeAttr实现五角星评分案例

ゞ浴缸里的玫瑰 2023-06-06 12:15 29阅读 0赞

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

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

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

//需求1：鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，点击后记录该状态，移开后状态不变。  
            //在鼠标放入事件中放入两个事件：  
            $(".comment li").on("mouseenter", function () \{  
                //当前五角星，和之前的所有五角星，全部是实心的，其他的为空心

// prevAll("元素")/nextAll("元素"):获取排在当前对象前面/后面的所有兄弟元素

// $(this).text(wjx\_sel).prevAll("li").text(wjx\_sel);  
               // $(this).nextAll("li").text(wjx\_none);  
 // end();结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。  
                $(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);  
                    \}  
                \});

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

\});

\});  
    </script>  
</head>

<body>

</body>