如何用jQuery实现五星好评

最新推荐文章于 2024-04-20 00:42:24 发布

奔跑在梦想的道路上

最新推荐文章于 2024-04-20 00:42:24 发布

阅读量446

点赞数 1

本文链接：https://blog.csdn.net/weixin_37654790/article/details/86161246

版权

如何用jQuery实现五星好评

　　jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。

　　Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。

　　接下来，我使用jQuery实现一个常见的五星好评功能。下面的页面中，我引用了前端的jQuery和bootstrap框架，读者可以从网上下载这些框架资源。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五星好评</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery-1.11.1.js"></script>
</head>
<!--设置样式-->
<style>
    ul{
        list-style-type: none;
    }
    li{
        float: left;
        margin-left: 15px;
        font-size: 60px;
        font-family: "simsun";
        cursor: pointer;
    }
    div{
        clear: both;
    }
    button{
        margin-left: 70px;
        font-size:30px;
    }
</style>
<!--JS代码-->
<script>
//    入口函数
    $(function(){
//        设置两个状态的星星
        var emptyStar="☆";
        var fullStar="★";
//        li鼠标移入事件
        $("li").mouseenter(function(){
            $(this).text(fullStar).prevAll().text(fullStar).end().nextAll().text(emptyStar);
        });
//        li鼠标离开事件
        $("li").mouseleave(function(){
            $("li").text(emptyStar);
            $("li.current").text(fullStar).prevAll().text(fullStar).end().nextAll().text(emptyStar);

        });
//        li点击事件
        $("li").click(function(){
            if($(this).hasClass("current")){
                $(this).removeAttr("class");
            }else{
                $(this).attr("class","current").siblings().removeAttr("class");
            }
        })
//        button点击事件
        $("button").click(function(){
            var boo=false;
            for(var i=0;i<$("ul>li").length;i++){
                if($("ul>li").hasClass("current")){
                    boo=true;
                }
            }
            if(boo){
                console.log("分数："+($("ul>li.current").index()+1)+"分");
            }else{
                return alert("您还没有选择呢！");
            }
        })
    })
</script>
<body>
<ul class="box">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
<div>
    <button>提交</button>
</div>
</body>
</html>

　　效果如下：

posted @ 2017-12-31 17:27 奔跑在梦想的道路上阅读( ...) 评论( ...) 编辑收藏

奔跑在梦想的道路上

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何用jQuery实现五星好评

如何用jQuery实现五星好评　　jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。　　Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。　　接下来，我使用jQuery实现一个常见的五星好评功能。下面的页面中，我引用了前端的jQuery和bootstr...
复制链接

扫一扫