jQuery五角星评分-小白教程

最新推荐文章于 2024-08-14 02:14:47 发布

Ys@_yxl

最新推荐文章于 2024-08-14 02:14:47 发布

阅读量738

点赞数

本文链接：https://blog.csdn.net/weixin_45817492/article/details/115564644

版权

jquery实现五角星评分效果

1.实现效果

鼠标移入，当前的星星和之前的星星变成红色，当鼠标移出时，星星都变成空心的。鼠标移出评论区后，再次移入到星星上，当前的星星和之前的星星变成红色。

2.思路分析

鼠标移入到li上 ----------当前的li以及前面所有的li变成实心，当前li后面所有的li变成空心。
鼠标移出ul----------------把所有的li变成空心
鼠标移出ul后，再次移入到li上------当前的li以及前面所有的li变成实心，当前li后面所有的li变成空心。

3.具体实现步骤

鼠标移入到li上

  $('li').on('mouseenter',function(){
              $(this).text(re).end().prevAll('li').text(re).end().nextAll('li').text(r)
   })

鼠标移出ul

 $('ul').on('mouseleave',function(){
            $(this).children().text(r)
              
        })

鼠标移出ul后，再次移入到li上

   $('li').on('mousemove',function(){
            console.log(1);
            $(this).prevAll('li').text(re).end().nextAll('li').text(r)
        })

4.具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width: 200px;
            height: 30px;
        }
        li{
            font-size: 30px;
            width: 30px;
            height: 30px;
            list-style: none;
            float: left;
            color:red;
            /* background-color: ; */
        }
    </style>
    <script src="jquery-3.4.0.js"></script>
</head>
<body>
    <ul>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    
    <script>
        var r = '☆'
        var re =  '★'
        $('li').on('mouseenter',function(){
        //1. 让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心
              $(this).text(re).end().prevAll('li').text(re).end().nextAll('li').text(r)
        })
        // 2 离开ul的时候，把所有的li变成空心
        $('ul').on('mouseleave',function(){
            $(this).children().text(r)
              //3. 让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心
            $('li').on('mousemove',function(){
                console.log(1);
                $(this).prevAll('li').text(re).end().nextAll('li').text(r)
            })
        })
    </script>
</body>
</html>