<!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. GrideView（三）---编辑功能实现

    GrideView(三)---编辑 法一.(优势:操作数据更加灵活:劣势: 书写较多代码,开发效率低) 通过编辑列---添加超链接(HyperlinkField)字段 ,来跳转页面实现编辑操作: 步骤 ...

  2. 【idea】idea快捷键

    Alt+回车 导入包,自动修正 alt+shift+↑  向上sout输出 psvm主函数 fori for Ctrl+N   查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L  格式化代 ...

  3. linux 下使用exp/imp 或者expdp/impdp导出导入oracle数据表数据

    一.环境配置 1.执行环境: exp/imp可以在客户端执行也可以在服务器端执行,在客户端执行需要先安装有oracle的客户端,如果是linux系统,就是以oracle用户登录,在控制台下执行.建议在 ...

  4. 在 Ubuntu 16.04 中安装支持 CPU 和 GPU 的 Google TensorFlow 神经网络软件

    TensorFlow 是用于机器学习任务的开源软件.它的创建者 Google 希望提供一个强大的工具以帮助开发者探索和建立基于机器学习的应用,所以他们在去年作为开源项目发布了它.TensorFlow ...

  5. Java-Runoob-高级教程-实例-数组：01. Java 实例 – 数组排序及元素查找

    ylbtech-Java-Runoob-高级教程-实例-数组:01. Java 实例 – 数组排序及元素查找 1.返回顶部 1. Java 实例 - 数组排序及元素查找  Java 实例 以下实例演示 ...

  6. HardFault_Handler 输出日志信息

    之前文章说了原理,这里把最终实现的代码总结: IAR void hard_fault_handler_c (unsigned int * hardfault_args) { unsigned int ...

  7. 小程序 获取地理位置-- wx.getLocation

    话不多说直接上栗子 //首先声明变量data:{ showLocationAuth:fasle } //这是第一种逻辑实现方式 点击按钮//当第一次点击授权按钮,用户取消授权之后,就会显示 授权当前定 ...

  8. 使用redis构建分布式锁

    Redis使用WATCH命令来代替对数据进行加锁,因为WATCH只会在数据被其他客户端抢先修改了的情况下通知执行了这个命令的客户端,但是不会阻止其他客户端对数据进行修改,所以这个命令被称为乐观锁. 但 ...

  9. 人工智能（七）逻辑Agent

    一.逻辑 逻辑是一种可以从中找出结论的形式化语言. 句法(规则)用语言定义句子. 语义定义句子的含义.定义一个句子的真假性. 二.蕴含 即一个事情逻辑上是另一个事情的必然结果:KB ╞ α 知识库KB ...

  10. 使用dubbox开发REST应用

    新建项目,添加Maven支持. 在pom.xml中添加依赖. <dependency> <groupId>org.jboss.resteasy</groupId> ...