jquery 制作评分控件

原创 2016年08月30日 14:12:38
<!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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

一个非常棒的jQuery 评分插件

现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现。比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但...
  • czh0423
  • czh0423
  • 2016年08月09日 15:03
  • 1625

jQuery Raty星级评分插件使用方法

使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件,如下所示:      使用方法很简单,首先从https://github.com/wbotelhos/raty下载...
  • qwlovedzm
  • qwlovedzm
  • 2014年11月23日 22:42
  • 7348

【jQuery】仿淘宝五星评价打分的实现

我的上一篇博文写到了评价分数的五星显示,这篇博文将介绍如何实现打分的效果。 首先,我们还是先分析我们想要的效果。 1.当鼠标移到星星上面的时候,当前星星以及前面的星星要亮起来,然后星星的右侧出现提示语...
  • LZGS_4
  • LZGS_4
  • 2015年08月23日 23:05
  • 5245

jquery制作美化星星评分插件

收藏(1) 分享到:0 用法简介: 来源:xw素材网 jquery制作美化星星评分插件 代码引用: "css/rating_star...
  • albert528108
  • albert528108
  • 2014年08月17日 22:10
  • 1720

Android评分控件

  • 2016年07月07日 13:30
  • 1.42MB
  • 下载

android自定义星星评分控件

  • 2017年06月28日 15:52
  • 21.27MB
  • 下载

左右滑动评分控件

  • 2015年01月28日 18:31
  • 3.37MB
  • 下载

自定义星星评分控件

  • 2017年06月19日 15:53
  • 35B
  • 下载

JavaScript(DOM)鼠标移动评分控件

  • 2013年01月09日 10:18
  • 2KB
  • 下载

安卓RatingBar的使用(评分控件)

  • 2016年08月21日 10:25
  • 1001KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 制作评分控件
举报原因:
原因补充:

(最多只允许输入30个字)