<!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. vim记住上次编辑和浏览位置

    在用户自己的目录下的.vimrc中添加, "remember last update or view postion" " Only do this part when ...

  2. POJ - 2418 Hardwood Species（map，trie，BST）

    1.输入若干行树名,输入结束后,按字典序输出树名及其所占百分比. 2.多种方法:map,trie,BST 3. map: #include<iostream> #include<st ...

  3. Linux 打包classes

    进入项目后 tar -zcvf ~/${HOSTNAME}-${PWD##*/}-$(date +%Y-%m-%d)-classes.tar.gz webapps/ROOT/WEB-INF/class ...

  4. codeforces 686A A. Free Ice Cream(水题)

    题目链接: A. Free Ice Cream //#include <bits/stdc++.h> #include <vector> #include <iostre ...

  5. BZOJ2874 训练士兵 主席树

    [啊 首先 这是道权限题,然后本人显然是没有权限的  23咳3] 最近数据结构做的越来越少..然后 就跟上次一样 ,一做就是三四种不同写法. 等价的题面: 最近GY大神在sc2的天梯中被神族虐得很惨, ...

  6. 80个Python经典资料（教程+源码+工具）汇总——下载目录 ...

    原文转自:http://bbs.51cto.com/thread-935214-1.html 大家好,51CTO下载中心根据资料的热度和好评度收集了80个Python资料,分享给Python开发的同学 ...

  7. mysqlnd cannot connect to MySQL 4.1+ using old authentication

    报这个错误主要是因为mysql使用了老的密码格式,而程序要求使用新的格式导致的,解决办法: SET old_passwords = 0; UPDATE mysql.user SET Password ...

  8. bzoj 1009: [HNOI2008]GT考试【kmp+dp+矩阵快速幂】

    看n和k的范围长得就很像矩阵乘法了 设f[i][j]表示到第i个位置的后缀最长匹配目标串的j位.转移的话显然是枚举0~9,然后选择f[i+1]中能被他转移的加起来,需要用到next数组.然后构造矩阵的 ...

  9. USACO Training3.3 A Game【区间Dp】 By cellur925

    题目传送门 一股浓浓的博弈论香气...然而本蒟并不会博弈论. 开始用双端队列+假的dp水过了24pts水数据. 其实是布星的,两人都绝顶聪明会深谋远虑不像我只看眼前,所以上述算法错误. 正解:区间dp ...

  10. 【微信公众号开发】根据openId群发消息

    根据开发文档可知,只要使用POST方式提交固定格式的json字符串到那个地址即可.这里我写的是最简单的文本 第一步:建立对应的实体类. package cn.sp.bean; import java. ...