关闭

jquery 制作评分控件

标签: jquery控件鼠标移动
103人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jQuery/scritps/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //为每个td注册一个mouseover事件
            $('#t1 td').mouseover(function () {
                $(this).text('★').prevAll().text('★').end().nextAll().text('☆');
            }).mouseout(function () {
                //当鼠标移开的时候把所有的Td都变成☆,把所有isclicked属性的Td以及之前的td变成★
                $('#t1 td').text('☆');
                $('#t1 td[isclicked=isclicked]').text('★').prevAll().text('★');
            }).click(function () {
                $(this).attr('isclicked', 'isclicked').siblings().removeAttr
                ('isclicked'); //等价于setAtttribute()
                //点击某个td的时候显示分数
                $('#pscore').text($(this).attr('score'));
            }).attr('score', function (index) {
                return (index + 1) * 20;
            });
        })
    </script>
    <style type="text/css">
        td
        {font-size:50px;
         color:Yellow;
         cursor:pointer;
            }
    </style>
</head>
<body>
    <p id="pscore">
    </p>
    <table id="t1" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>☆
            </td>
            <td>☆
            </td>
            <td>☆
            </td>
            <td>☆
            </td>
            <td>☆
            </td>
        </tr>
    </table>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13789次
    • 积分:356
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:1篇
    • 译文:1篇
    • 评论:0条
    文章分类
    文章存档