jQuery--五星好评案例

最新推荐文章于 2023-01-20 18:39:57 发布

马德里甜欣

最新推荐文章于 2023-01-20 18:39:57 发布

阅读量993

点赞数 3

本文链接：https://blog.csdn.net/weixin_51564923/article/details/122352645

版权

在平台上购物买东西之后评论会进行五星好评来对商家的商品进行好坏评估。今天来实现这个案例。

当我们鼠标移动到哪一个五星时，这个星与它之前的所有星都点亮。（此时没有点击鼠标）当我们移走时五星便都灭掉。只有点击之后才能确定当前选择星星的个数。

兄弟姐妹们记得引入jQuery文件，不然是没有页面效果的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        li{
            list-style: none;
            color: pink;
            cursor: pointer;
            float: left;
           font-size: 200px;
        }
    </style>
<body>
    <ul>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    <script src="./jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            $("li").on("mouseenter",function(){
                $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
            })
            $("li").on("mouseleave",function(){
            if($("li.current").length===0){
                $("li").text("☆");
            }
            else{
                 $("li.current").text("★").prevAll("li").text("★").end().nextAll("li").text("☆")
            }
        })
            $("li").click(function(){
               $(this).attr("class","current").siblings("li").removeAttr("class")
            })
            
        })
    </script>
</body>
</html>