<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<style type="text/css">

  .box{

    width:300px;

    height:40px;

  }

  li{

    height: 40px;

    width:40px;margin-right: 5px;

    border-radius: 50%;

    background: red;

    list-style: none;

    background-position: center;

    float: left;

    cursor: pointer;

  }

  #score{

    color:red;

    margin-top:20px;

  }

  .current{background: green;}

</style>

<body>

  <div class="box" id="star0" score="">

    <li ></li>

    <li ></li>

    <li></li>

    <li></li>

    <li></li>

  </div>

  <div id="score"></div>

  <script src="scripts/jquery-1.7.1.min.js"></script>

  <script type="text/javascript">

    $(".box li").click(function(){

     var index = $(this).index();

     $(this).parent().attr("score",index+1);

     var parentId = $(this).parent().attr("id");

     $("#"+parentId).find("li").css("background","red");

     for(var i=0;i<=index;i++){

      $("#"+parentId).find("li").eq(i).css("background","green");

    }

    var score = $("#"+parentId).attr("score");

    $("#score").text("您选择的分数是:"+score+"分");

  });

  </script>

</body>

</html>

jQuery 点击 星星评分的更多相关文章

  1. HTML5商城开发三 jquery 星星评分插件

    展示:

  2. jQuery实现星星评分功能

    一.这是我做的调查问卷中的一个功能.(第三方MVC框架) 二.功能说明:1.用户点击星星,将值放到隐藏域中.2.用户可以重新点击星星修改回答. 前台JS代码: <script type=&quo ...

  3. angularjs实现星星评分

    angularjs实现星星评分 自定义指令 app.directive('myStars', function () { return { require : '?ngModel', // ?ngMo ...

  4. js点亮星星评分并获取参数的js代码

    点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...

  5. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  6. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. jquery点击改变图片src源码并toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  9. jquery点击图片选中特效

    jquery点击图片选中特效 点击在线预览效果

随机推荐

  1. YTU 2900: F-A Simple Question

    2900: F-A Simple Question 时间限制: 1 Sec  内存限制: 128 MB 提交: 66  解决: 24 题目描述 今天,pasher打算在一个浪漫的花园和他的搭档们聚餐, ...

  2. 深入探析c# Socket

    最近浏览了几篇有关Socket发送消息的文章,发现大家对Socket Send方法理解有所偏差,现将自己在开发过程中对Socket的领悟写出来,以供大家参考. (一)架构 基于TCP协议的Socket ...

  3. Mysql数据库的数据类型、索引、锁、事务和视图

    Mysql数据库的数据类型.索引.锁.事务和视图 数据的类型 1)数据类型: 数据长什么样? 数据需要多少空间来存放? 系统内置数据类型和用户定义数据类型 2)MySql 支持多种列类型: 数值类型 ...

  4. hdu4608 I-number

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4608 题意:给定一个数X,注意X是个大数,X的长度不超过1e5. 让你求出一个Y,满足三个条件,Y&g ...

  5. Ubuntu 12.04的gnome classic panel添加程序快捷键(转载)

    How to add applets to the Gnome classic panel in Ubuntu 12.04 转自:http://www.borfast.com/blog/how-add ...

  6. Lightoj 1174 - Commandos (bfs)

    题目链接: Lightoj  1174 - Commandos 题目描述: 有一军队秉承做就要做到最好的口号,准备去破坏敌人的军营.他们计划要在敌人的每一个军营里都放置一个炸弹.军营里有充足的士兵,每 ...

  7. 积分图像 分类： 图像处理 Matlab 2015-06-06 10:30 149人阅读 评论(0) 收藏

    积分图像(integral image)是一种快速计算矩形区域之和的数据结构,常利用它对算法进行加速.积分图像中处的值是原始灰度图像的左上角与当前点所围成的矩形区域内所有像素点的灰度值之和,即: 其中 ...

  8. 451 Sort Characters By Frequency 根据字符出现频率排序

    给定一个字符串,请将字符串里的字符按照出现的频率降序排列.示例 1:输入:"tree"输出:"eert"解释:'e'出现两次,'r'和't'都只出现一次.因此' ...

  9. C. Unfair Poll 数学题，

    http://codeforces.com/contest/758/problem/C 需要一个能够找到任意一个位置的步数的方法,就能解决三个问题. 预处理出one(row, col)表示第一次经过这 ...

  10. ambari集群里如何正确删除历史修改记录（图文详解）

    不多说,直接上干货! 答:这些你想删除的话得得去数据库里删除,最好别删除 .  现在默认就是使用好的配置               欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智 ...