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(): 下一个兄弟
        */

       // 声明一个变量, 记录这个实心五角星
       var solid_star = '★';
       var hollow_star = '☆';


    // 给 li 注册 事件
    $('.comment > li').on('mouseenter', function () {
        // 需求1: 鼠标移入到li标签上,当前li标签和他之前的li标签显示 实心五角心,后面的li显示 空心五角心.
        // $(this).text(solid_star).prevAll().text(solid_star).nextAll().text(hollow_star);
        $(this).text(solid_star).prevAll().text(solid_star);
        $(this).nextAll().text(hollow_star);
    }).on('mouseleave', function () {
        // 需求2: 鼠标离开li,所有的li都变成空心
        $('.comment > li').text(hollow_star);
        // 在鼠标离开的时候, 获取刚才点击的那个li
        $('.comment > li[clickCurrent]').text(solid_star).prevAll(solid_star);


    }).on('click', function () {
        // 需求3: 点击li,鼠标离开后,刚才点击的那个li和之前的li都变成 实心五角心,后面 空心五角心
        // 给鼠标当前点击的li做一个记号,为什么要做一个记号,是因为鼠标离开的时候,要知道你刚才点击的是哪一个li
        // 给当前鼠标点击的这个li添加一个独一无二的属性
        // 方式1: 通过索引, 可行
        // 方式2: 给当前 鼠标点击的 li, 添加一个 独一无二的属性, 之后 可以通过这个属性来判断
        $(this).attr('clickCurrent', 'current').siblings().removeAttr('clickCurrent');
    });
       
   });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

在这里插入图片描述

相关阅读:
linux系统-----------搭建LNMP 架构
国家信息安全水平考试NISP证书（一级、二级、三级）
在vite初始化的项目中安装scss，及scss的使用
I.MX6U ALPHA裸机开发
Unity基础课程之物理引擎4-用于射击或者点击消除的射线检测方法
数据采集与预处理课设——人在回路的气温数据动态处理与可视化
Elasticsearch搜索匹配功能解析(十一)
@slf4j 找不到log
Unity进阶提升-2D游戏跳跃手感优化（跳起下落）
有效的字母异位词（哈希表）

原文地址：https://blog.csdn.net/beyondx/article/details/126124688