jQuery-五角星评分案例

最新推荐文章于 2022-09-13 08:40:48 发布

gxgalaxy

最新推荐文章于 2022-09-13 08:40:48 发布

阅读量406

点赞数

分类专栏： JQuery 前端

本文链接：https://blog.csdn.net/gxgalaxy/article/details/103142534

版权

前端同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

JQuery

10 篇文章 0 订阅

订阅专栏

文章目录

效果图

在这里插入图片描述

需求

 		//需求１：鼠标移入到li标签上，当前li标签和他之前的li标签显示实心五角星，后面的li显示空心五角星
        //需求２：鼠标离开li，所有的li都变成空心
        //需求３：点击li，鼠标离开后，刚才点击的那个li和之前的li都变成实心五角星，后面的空心五角星

源代码

<!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>
</body>
</html>
<script src="../jquery-3.4.1.min.js"></script>
<script>
    $(function(){
        //需求１：鼠标移入到li标签上，当前li标签和他之前的li标签显示实心五角星，后面的li显示空心五角星
        //需求２：鼠标离开li，所有的li都变成空心
        //需求３：点击li，鼠标离开后，刚才点击的那个li和之前的li都变成实心五角星，后面的空心五角星

        //prev() 找上一个兄弟
         //prevAll() 之前所有的兄弟
         //next() 下一个兄弟
         //nextAll()　之后所有的兄弟
         //声明两个变量记录实心五角星和空心五角星
         var sx_wjx = '★';
         var kx_wjx = '☆';
        //需求１
        $(' .comment>li').on('mouseenter',function(){
            //当前鼠标移入的li和他的之前的兄弟li都显示实心五角心
            $(this).text(sx_wjx).prevAll().text(sx_wjx);
            //当前鼠标移入的li之后的兄弟li都显示空心五角星
            $(this).nextAll().text(kx_wjx);

        }).on('mouseleave',function(){
            //需求２
            $(' .comment>li').text(kx_wjx);
            //获取刚才点击的个li
            $(' .comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);
        }).on('click',function(){
            //需求３给鼠标当前点击的li做一个记号，是因为鼠标离开的时候点击的是哪一个li
            //给当前鼠标点击的li添加一个独一无二的属性
            $(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent');

        });

    });
</script>

gxgalaxy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery-五角星评分案例

文章目录效果图需求源代码效果图需求 //需求１：鼠标移入到li标签上，当前li标签和他之前的li标签显示实心五角星，后面的li显示空心五角星 //需求２：鼠标离开li，所有的li都变成空心 //需求３：点击li，鼠标离开后，刚才点击的那个li和之前的li都变成实心五角星，后面的空心五角星源代码<!DOCTYPE html><h...
复制链接

扫一扫