五角星评分jQuery

强尼、银手

于 2023-03-27 10:00:00 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

文章标签： jquery javascript 前端 html

本文链接：https://blog.youkuaiyun.com/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都