jQuery-五角星评分案例

文章目录

    • 效果图
    • 需求
    • 源代码

效果图

在这里插入图片描述

需求

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

源代码


<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(){
        //需求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);

        }).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>

你可能感兴趣的:(JQuery,前端)