<!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. Unable to resolve dependency for ':app@debug/compileClasspath': Could not resolve com.android.support.constraint:constraint-layout:1.1.0. Could not resolve com.android.support.constraint:constraint-l

    File->Settings->Build, Execution, Deployment->Gradle->取消选中 Offline work 按钮

  2. Lightoj 1005 Rooks(DP)

    A rook is a piece used in the game of chess which is played on a board of square grids. A rook can o ...

  3. 【Selenium】idea导入eclisp项目的问题

    ①导入:file→new→Project from exiting 选择ecliesp 然后next就可以 ②添加依赖:每个包都要加,引用其他包的类,也要添加依赖 setting选择junit4

  4. 基于 jQuery 的专业 ASP.NET WebForms/MVC 控件库！

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. bzoj3638

    费用流+线段树 看见这个题我们马上就能想到费用流,设立源汇,分别向每个点连接容量为1费用为0的边,然后相邻的点之间连边,费用为点权,跑费用流就行了,但是很明显这样会超时,那么我们要优化一下,我们观察费 ...

  6. 关于netty的多个handler链式模式

    1. 老规矩, 引入我们喜闻乐见的maven依赖 <dependency> <groupId>io.netty</groupId> <artifactId&g ...

  7. 在Visual studio 中解除 TFS 的账号绑定

    在Visual Studio中, 只要使用了TFS, 就会要求输入用户名密码验证 . 但是一旦点击验证对话框下部的:记住用户名密码 以后都不能再修改用户名了. 而且重装Visual Studio 听说 ...

  8. bzoj 2245 [SDOI2011]工作安排【最小费用最大流】

    其实不用拆点,对于每个人我们假装他是\( s[i]+1 \)个点,可以由他向T点分别连\( s[i]+1 \)条边,容量为\( t[i][j]-t[i][j-1]\),由S点向所有产品i连容量为c[i ...

  9. CodeForces E. Goods transportation【最大流+dp最小割】

    妙啊 首先暴力建图跑最大流非常简单,s向每个i连流量为p[i]的边,每个i向t连流量为s[i]的边,每个i向j连流量为c的边(i<j),但是会又T又M 考虑最大流=最小割 然后dp求最小割,设f ...

  10. [App Store Connect帮助]八、维护您的 App（2）将 App 从 App Store 中移除

    如果您不想继续向顾客提供您的 App,您可以将其从 App Store 中移除,这样会移除该 App 的所有版本.拥有该 App 先前版本的用户将无法更新 App,但只要您的合约有效,用户便仍可下载最 ...