html+js+jquary完成的五星评分(评价效果demo)





html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星评分案例title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: teal;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    style>
    <script src="../jquery-1.12.4.js">script>
    <script>
        $(document).ready(function(){
            var shixin = "";
            var kongxin = "";
            /*var flag = false;//没有点击*/
            $("li").mouseenter(function(){
                /*$(this).text(shixin).prevAll().text(shixin);
                $(this).nextAll().text(kongxin);*/
                $(this).text(shixin).prevAll().text(shixin).end().nextAll().text(kongxin);
            });
            $(".comment").mouseleave(function(){
               /* if(!flag){
                    $("li").text(kongxin);
                }*/
                $("li").text(kongxin);
                $(".clicked").text(shixin).prevAll().text(shixin);
            });
            $("li").on("click",function(){
               /* $(this).text(shixin).prevAll().text(shixin);
                $(this).nextAll().text(kongxin);
                flag = true;*/
                $(this).addClass("clicked").siblings().removeClass("clicked");
            });
        });
    script>
head>
<body>
<ul class="comment">
    <li>li>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
ul>
body>
html>

你可能感兴趣的:(前端学习笔记)