五星好评插件 js + html +css


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .box{
            margin: 20px auto;
            height: 50px;
            width: 300px;
        }
        .box .comment{
            font-size: 30px;
            color: orange;
        }

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

        ul{
            list-style: none;
        }

    style>
head>
<body>
    <div class="box">
        <ul class="comment" name="xingji">
            <li value="1">li>
            <li value="2">li>
            <li value="3">li>
            <li value="4">li>
            <li value="5">li>
        ul>
    <input type="text" value="" id="aaa">
    div>
body>
html>
<script src="jquery.min.js">script>
<script>
    $(function(){
        var wjx_none = '☆'; // 空心五角星
        var wjx_sel = '★'; // 实心五角星

        //鼠标移进变实星
        $(".comment li").on("mouseover",function(){
            $(this).text(wjx_sel).prevAll("li").
            text(wjx_sel).end().nextAll().text(wjx_none);
            $("#aaa").val($(this).val());

        });

        //鼠标移出变空星
        $(".comment li").on("mouseout",function(){
           if($("li.current").length === 0){
                $(".comment li").text(wjx_none);
           }else{
               $("li .current").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
           }
        });

        //鼠标点击保持当前状态
        $(".comment li").on("click",function(){
            $(this).attr("class","current").siblings().removeClass("current");

            $("#aaa").val($(this).val());
            // alert($(this).val());
        });


    });
script>

记得引入jquery哦~~~

你可能感兴趣的:(JavaScript,html+css)