<!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. linux 下RTL8723/RTL8188调试记录（命令行）【转】

    本文转载自:http://blog.h5min.cn/wuhongxin123/article/details/41820877 本文是在正确安装好wifi驱动后对系统进行的配置. 1.   配置wp ...

  2. Managing SQLite Database

    Approach #1: Use a Singleton to Instantiate the SQLiteOpenHelper Declare your database helper as a s ...

  3. SPOJ：Labyrinth（最大直线）

    The northern part of the Pyramid contains a very large and complicated labyrinth. The labyrinth is d ...

  4. hdu2089(数位DP 递推形式)

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. MVC视图中下拉框的使用

    一.一般变量或对象的绑定 首先要在controller 中将选项设置成 selecList对象,并赋值给viewBag动态对象. public ActionResult Index(string mo ...

  6. <hr />标签的颜色和粗细设定

    设置<hr />的颜色和粗细,不需要用到style,直接用标签的color和size属性: <hr color="red" size="0.5" ...

  7. 不让浏览器缓存input的值

    方法一: 在不想使用缓存的input中添加 autocomplete="off"eg: <input type="text" autocomplete=& ...

  8. bzoj 2811: [Apio2012]Guard【线段树+贪心】

    关于没有忍者的区间用线段树判就好啦 然后把剩下的区间改一改:l/r数组表示最左/最右没被删的点,然后删掉修改后的左边大于右边的:l升r降排个序,把包含完整区间的区间删掉: 然后设f/g数组表示i前/后 ...

  9. P5107 能量采集

    传送门 官方题解 话说最后的答案忘记取模了结果连暴力都挂了可海星-- //minamoto #include<bits/stdc++.h> #define R register #defi ...

  10. 《windows核心编程系列》七谈谈用户模式下的线程同步

    用户模式下的线程同步 系统中的线程必须访问系统资源,如堆.串口.文件.窗口以及其他资源.如果一个线程独占了对某个资源的访问,其他线程就无法完成工作.我们也必须限制线程在任何时刻都能访问任何资源.比如在 ...