案例:五星点评

效果图: 在这里插入图片描述
需求分析： 1.鼠标移入li标签,当前li标签和之前的li标签全部变为实心;
2.鼠标移开,所有的li标签变为空心;
3.鼠标点击li标签,当前li标签和之前的li标签全部变为实心

jq代码实现过程:

       var shiXin="★";
            var kongXin='☆'

            $('li').on('mouseenter',function (  ) {
                //需求1:鼠标移入后,当前的li标签和前面的li标签显示实心,后面的li标签显示空心
                $(this).text(shiXin).prevAll().text(shiXin).end().nextAll().text(kongXin);
            }).on('mouseleave',function (  ) {
                $('li').text(kongXin);
                //找到索引的li,给这个li和它前面的li设置实心
                $('li[index="dianji"]').text(shiXin).prevAll().text(shiXin);

            }).on('click',function (  ) {
                //给点击的li添加索引,其余的去除索引
                    $(this).attr('index','dianji').siblings().removeAttr('index')
            })

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style:none
        }
        li {
            float:left;
            cursor: pointer;
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
<ul>
    <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标签全部变为实心;
                                   2.鼠标移开,所有的li标签变为空心;
                                   3.鼠标点击li标签,当前li标签和之前的li标签全部变为实心
               二：思路分析
                        1.获取元素
                        2.注册事件
                        3.事件处理
            */
      /*      var shiXin='★';
            var kongXin='☆';
             $ ( "li" ).on ( "mouseenter", function () {
                // 1.鼠标移入li标签,当前li标签和之前的li标签全部变为实心,后面的五角星变为空心(这一步必须要,不然往前移会有bug)
                 $ ( this ).text ( shiXin ).prevAll ().text ( shiXin ).end().nextAll ().text(kongXin)
                 //end()方法是返回上一个状态的返回值
             } ).on ( "mouseleave", function () {
                //2.鼠标移开,所有的li标签变为空心;
              $('li').text(kongXin);
                $ ( 'li[index="dianji"]' ).text(shiXin).prevAll().text(shiXin);
                        //
             } ).on('click',function (  ) {
                 //3.鼠标点击li标签,当前li标签和之前的li标签全部变为实心
                //给点击的li添加索引
                 $(this).attr('index','dianji').siblings().removeAttr('index');

             })*/

      //第二遍:
            var shiXin="★";
            var kongXin='☆'

            $('li').on('mouseenter',function (  ) {
                //需求1:鼠标移入后,当前的li标签和前面的li标签显示实心,后面的li标签显示空心
                $(this).text(shiXin).prevAll().text(shiXin).end().nextAll().text(kongXin);
            }).on('mouseleave',function (  ) {
                $('li').text(kongXin);
                //找到索引的li,给这个li和它前面的li设置实心
                $('li[index="dianji"]').text(shiXin).prevAll().text(shiXin);

            }).on('click',function (  ) {
                //给点击的li添加索引,其余的去除索引
                    $(this).attr('index','dianji').siblings().removeAttr('index')
            })


        } )
    </script>
</body>
</html>

案例:五星点评

案例:五星点评

猜你喜欢