五角星评分jQuery

最新推荐文章于 2024-07-14 12:56:18 发布

强尼、银手

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量87

点赞数

文章标签： jquery javascript 前端 html

本文链接：https://blog.csdn.net/hideonbush123/article/details/129777740

版权

最近研究了一下五角星评分案例,还是黑马的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;
            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();    下一个兄弟.
     //nextAll(); 之后所有的兄弟

     //声明两个个变量,分别记录这个实心/空心五角心.
     var sx_wjx = '★';
     var kx_wjx = '☆';

     //需求1:
     $('.comment>li').on('mouseenter', function () {
       // //当前鼠标移入的li和他之前的兄弟li都显示实心五角心.
       // $(this).text(sx_wjx).prevAll().text(sx_wjx);
       // //当前鼠标移入的li之后的兄弟li都显示空心五角心.
       // $(this).nextAll().text(kx_wjx);

       //这样不行.
       //$(this).text(sx_wjx).prevAll().text(sx_wjx).nextAll().text(kx_wjx);

       //这样又可行, 加了一个end();
       $(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);

     }).on('mouseleave', function () {
       //需求2:
       $('.comment>li').text(kx_wjx);

       //获取刚才点击的那个li.
       $('.comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);

     }).on('click', function () {
       //需求3:
       //给鼠标当前点击的li做一个记号,为什么要做一个记号,是因为鼠标离开的时候,要知道你刚才点击的是哪一个li.
       //给当前鼠标点击的这个li添加一个独一无二的属性.
       $(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent');
     });


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