如何用jQuery实现五星好评

Posted 奔跑在梦想的道路上

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用jQuery实现五星好评相关的知识,希望对你有一定的参考价值。

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

  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>

  效果如下:

 

以上是关于如何用jQuery实现五星好评的主要内容,如果未能解决你的问题,请参考以下文章

鸿蒙HarMonyOS的自定义组件之五星好评

18.Flink-练习-订单自动好评数据实现步骤代码实现

18.Flink-练习-订单自动好评数据实现步骤代码实现

五星好评

UWP 五星好评

评分---五星好评