<!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. UVA11183 Teen Girl Squad —— 最小树形图

    题目链接:https://vjudge.net/problem/UVA-11183 You are part of a group of n teenage girls armed with cell ...

  2. 解决多次异步请求紊乱问题 - JavaScript

    加入目前的需求这样的:       左边的菜单链接,点击后通过异步请求返回其HTML代码,然后innerHTML到右面的DIV中,加入切换菜单的速度非常快,最终会导致请求紊乱. 可以加入消息管理机制, ...

  3. vs2010统计代码行数

    参考:http://www.cnblogs.com/zfanlong1314/archive/2013/03/08/2950100.html 正则表达式:^:b*[^:b#/]+.*$ 文件类型:*. ...

  4. UVa 11538 Chess Queen (排列组合计数)

    题意:给定一个n*m的棋盘,那么问你放两个皇后相互攻击的方式有多少种. 析:皇后攻击,肯定是行,列和对角线,那么我们可以分别来求,行和列其实都差不多,n*A(m, 2) + m*A(n, 2), 这是 ...

  5. Android SDK更新以及ADT更新出现问题的解决办法（转载）

    转自:http://zyueqi.iteye.com/blog/1474323 问题描述 使用SDK Manager更新时出现问题Failed to fetch URL https://dl-ssl. ...

  6. [知识积累]python3使用xlwt时写入文档字体颜色和边框样式

    可借鉴的网址:https://www.programcreek.com/python/example/39979/xlwt.Alignment 可以直接通过pip安装xlwt 个人理解: xlwt中对 ...

  7. bzoj 1797: [Ahoi2009]Mincut 最小割【tarjan+最小割】

    先跑一遍最大流,然后对残量网络(即所有没有满流的边)进行tarjan缩点. 能成为最小割的边一定满流:因为最小割不可能割一半的边: 连接s.t所在联通块的满流边一定在最小割里:如果不割掉这条边的话,就 ...

  8. 11.3NOIP模拟赛

    /* 考虑贪心 把原序列排序后,对于原中位数往后所有比要更改到的值小的都改成它 正确性显然. */ #include<iostream> #include<cstdio> #i ...

  9. [App Store Connect帮助]八、维护您的 App（4.1）监控顾客评论：评分与评论概述

    App Store 上的评分与评论 顾客可以按照 1 星至 5 星的级别对您的 App 进行评分.顾客还可为您的 iOS 和 macOS App 撰写评论,但无法为 Apple TVOS App 撰写 ...

  10. DecimalFormat数字格式化用法“0”和“#”的区别

    1. 以“0”补位时: 如果数字少了,就会补“0”,小数和整数都会补: 如果数字多了,就切掉,但只切小数的末尾,整数不能切: 同时被切掉的小数位会进行四舍五入处理. 2. 以“#”补位时: 如果数字少 ...