Hi All,

分享一个学习JQuery做的一个评分控件。

需求:当鼠标移动到 ‘☆’ 上时,该字符左边的 ‘☆’ 变成 '★',该字符右边仍然是 ‘☆’, 并显示相应星星数的评价结果;当鼠标推出 ‘☆’时,所以字符为 ‘☆’,并清空评价结果。

注:一个 '★' 为:差

  二个 '★' 为:一般

  三个 '★' 为:良好

  四个 '★' 为:满意

  五个 '★' 为:很满意

1. 用HTML画好布局:

<div class="myPosition">
        <h2>评分:</h2>
        <table class="myFont">
            <tr id="tr_mark">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div class="myComment">
        <span id="myComment">一般</span>
    </div>

2. 用CSS控制表现形式:

.myPosition {     position:absolute;     top:35%;     left:20%; }

.myFont {     font-size: 24px; }

.myComment {     color: red;     font-weight:bold;     font-size: 20px;     position:absolute;     top: 44%;     left:30%; }

3. 用JQuery控制行为

<script src="../Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $tds = $("#tr_mark > td"); // 获取所有的td
            $tds.text("☆"); // 设置td的innerText
            $tds.mousemove(function () { // 给所有的td注册mouseove事件
                $tds.text("★");
                $(this).nextAll().text("☆");
                var td = $(this).get(0);
                var index = td.cellIndex;
                switch (index)
                {
                    case 0:
                        $("#myComment").text("差");
                        break;
                    case 1:
                        $("#myComment").text("一般");
                        break;
                    case 2:
                        $("#myComment").text("良好");
                        break;
                    case 3:
                        $("#myComment").text("满意");
                        break;
                    case 4:
                        $("#myComment").text("很满意");
                        break;
                }
            }).mouseout(function () { // 给所有的td注册mouseout事件
                $tds.text("☆"); // 将所有td内容变成空 ☆
                $("#myComment").text(""); // 将评价结果内容清空
            });
        });
    </script>

4. 显示结果:

这样一个简单的淘宝评分控件就完成了,大家可以尝试一下 :).

JQuery版评分控件的更多相关文章

  1. jquery.sobox 经典版弹窗控件

    sobox 是一款非常实用的,基于 jQuery 的弹窗控件.功能非常完整,而代码量又非常少(压缩完仅8k不到)的一款弹窗控件,如果你熟悉ext的弹窗控件,那么sobox的使用对你来说应该是愉悦而完全 ...

  2. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  3. 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  4. 模仿win10样式,基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

  5. 《zw版·delphi与halcon系列原创教程》zw版_THOperatorSetX控件函数列表 v11中文增强版

    <zw版·delphi与halcon系列原创教程>zw版_THOperatorSetX控件函数列表v11中文增强版 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就 ...

  6. 《zw版·delphi与halcon系列原创教程》zw版_THImagex控件函数列表

    <zw版·delphi与halcon系列原创教程>zw版_THImagex控件函数列表 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核心控件就是两 ...

  7. Android星星评分控件RatingBar的使用

    在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...

  8. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  9. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

随机推荐

  1. Script error.全面解析

    一些用户向我们反馈,Fundebug的[JavaScript](https://docs.fundebug.com/notifier/javascript/)监控插件抓到了很多**Script err ...

  2. ajax第三步

    ajaxSend()函数用于设置当AJAX请求即将被发送时执行的回调函数. 这是一个全局AJAX事件函数,用于为任何AJAX请求的ajaxSend事件绑定事件处理函数.当AJAX请求即将被发送时,将触 ...

  3. Bootstrap基础学习(一)—表格与按钮

    一.Bootstrap 概述      Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...

  4. 在jsp中用一数组存储了数据库表中某一字段的值,然后在页面中输出其中的值。

    List<String> list = new ArrayList<String>();  String sql = "select userName from us ...

  5. 在eclipse中使用Maven建web工程项目

    在eclipse中使用Maven建web工程项目: 第一种方式: 右键新建maven工程,勾选创建一个简单工程 填入信息,注意打包方式要改为war 点击完成,创建完的工程目录如下: 项目中没有WEB- ...

  6. NodeJs系列一:神奇的nodejs

    nodejs是什么 nodejs能解决什么问题 非阻塞型I/O及事件环机制 什么时候使用nodejs nodejs是什么 Node.js是让Javascript脱离浏览器运行在服务器的一个平台(或者叫 ...

  7. 凭证(Credential)

    在SQL Server中,凭证(Credential)用于把Windows用户的身份验证信息(在Windows环境下,是Windows 用户名和密码)存储在SQL Server实例中,并把该身份验证信 ...

  8. struts1实现简单的登录功能(附源码)

    环境:MyEclipse 14                                                                                     ...

  9. 生肖年(switch练习)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. C/C++对bool operator < (const p &a)const的认识,运算符重载详解(杂谈)

    下面来进行这段代码的分析: struct node {  //定义一个结构体node(节点)    int x;    int y;    int len;   //node中有3个成员变量x,y,l ...