码迷,mamicode.com
首页 > Web开发 > 详细

jquery代码实现简单的五星评价功能!

时间:2015-08-13 19:54:43      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

实现:  1,鼠标移动到第三个星星,则一二三星星变亮,后两个变暗

     2,鼠标点击某个星星后,可以继续选择,但拿开后星星会定格住你点击的位置

<script type="text/javascript">
        //
        $(function () {
            //由于不好获取点击的span的是何坐标,所以声明一个变量来记录点击的span标签的id
            var mark;
            $("*").css({ margin: "0px", padding: "0px;" });
            $("span")
                .css({ fontSize: "20px", color: "yellow" })
                .mouseover(function () {
                    $(this).text("")
                        .prevAll().text("").end()
                        .nextAll().text("").end()
                        .click(function () {
                            mark = $(this).attr("id");
                        })
                });
            $("div")
                 .css({ width: "100px", height: "20px", border: "1px solid black" })
                 .mouseout(function () {
                    //如果mark内有内容,则在鼠标离开div后,让星星数量变回你最近一次点击的位置
                     if (mark) {
                         $("#" + mark)
                            .text("")
                            .prevAll().text("").end()
                            .nextAll().text("");
                     }
                     //mark中没有值,意味着你没有点击任何星星,这时,让所有的星星都黯淡吧
                     else {
                         $("span").text("");
                     }
                 });
        });
    </script>
</head>
<body>
    <div id="div">
        <span id="1"></span><span id="2"></span><span id="3"></span><span id="4"></span><span id="5"></span>
    </div> 
</body>

 

jquery代码实现简单的五星评价功能!

标签:

原文地址:http://www.cnblogs.com/zsmart/p/4728037.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!