<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

li{ float:left; width:50px; height:50px; background:red; margin:5px;}

</style>

<script src="jquery-1.11.1.js"></script>

<script>

$(function(){

	$("li").click(function(){

		//console.log($(this).index());

		var $this=$(this).index();

		var $length=$('li').length;

		for(var i=0;i<$length;i++){

			if(i<=$this){

				$('li').eq(i).css('background','blue');

			}else{

				$('li').eq(i).css('background','red');

			}

		}

	})

});

</script>

</head>

<body>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ul>

</body>

</html>

　　

jq demo 点击评分组件的更多相关文章

  1. jq demo 点击弹窗，居中，可滚动，可拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jq demo 点击选中元素左右移动

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. ExtJS 4.2 评分组件

    上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...

  4. 干货之运用CALayer创建星级评分组件（五角星）

    本篇记录星级评分组件的创建过程以及CALayer的运用. 为了实现一个星级评分的组件,使用了CALayer,涉及到mask.CGPathRef.UIBezierPath.动画和一个计算多角星关键节点的 ...

  5. Full-featured Vue 评分组件

    分享一下最近写的 vue 的评分组件 Features: 支持半星.可清除.文案展示.只读.自定义颜色.自定义字符及图片等.支持 hover 的时候改变 value.内置三种样式,以及非常好看 DEM ...

  6. vue 星星评分组件

    显示评分和打分组件,可现实半颗星星效果 效果图: 参数名 类型 说明 score Number 分数 ,默认0,保留一位小数 disabled Boolean 是否只读,默认false,鼠标点击可以打 ...

  7. 【CSS】329- 非常强！3行核心css代码的rate评分组件

    像rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行? 01 效果图 02 原理 主要是借助radio单选框,梳理如下: 去 ...

  8. 原生JS结合cookie实现商品评分组件

    开发思路如下: 1.利用JS直接操作DOM的方式开发商品评分组件,主要实现功能有:显示评价评分的样式以及将用户操作后对应的数据返回到主页面 2.主页面引入商品评分组件的js文件并根据规定格式的数据,生 ...

  9. Angular 星级评分组件

    一.需求演变及描述: 1. 有一个“客户对公司的总体评价”的字段(evalutation).字段为枚举类型,0-5,对应关系为:0-暂无评价,1-很差,2-差,3-一般,4-好,5-很好 2. 后来需 ...

随机推荐

  1. 浏览器 User-Agent相关知识

    文章引用链接 http://www.360doc.com/content/12/1012/21/7662927_241124973.shtml

  2. Python Mysql 交互

    Mysql 安装Python模块   Linux: yum install MySQL-python Windos: http://files.cnblogs.com/files/wupeiqi/py ...

  3. 学习类后回顾pickle及collections模块应用场景优化

    1.首先创建一个类,并给出一个对象 class Dog(object): def __init__(self,name,kind,age): self.name=name self.kind=kind ...

  4. flask --- 03 .特殊装饰器, CBV , redis ,三方组件

    一.特殊装饰器(中间件) 1.before_request 在请求进入视图函数之前 @app.before_request def look(): 2. after_request 在结束视图函数之后 ...

  5. 【做题】agc006e - Rotate 3x3——分析&思维

    原文链接 https://www.cnblogs.com/cly-none/p/9800105.html 题意:给出一个三行\(n\)列的矩阵.问它能否由满足\(a_{ij} = 3(j-1) + i ...

  6. 【CentOS 7】CentOS7与CentOS6 的区别

    前言 centos7与6之间最大的差别就是初始化技术的不同,7采用的初始化技术是Systemd,并行的运行方式,除了这一点之外,服务启动.开机启动文件.网络命令方面等等,都说6有所不同. 一.系统初始 ...

  7. CSS: hover选择器的使用

    用法1:这个表示的是:当鼠标悬浮在a这个样式上的时候,a的背景颜色设置为黄色 a:hover        {             background-color:yellow;        ...

  8. C++类的大小计算汇总

    C++中类涉及到虚函数成员.静态成员.虚继承.多继承.空类等. 类,作为一种类型定义,是没有大小可言的. 类的大小,指的是类的对象所占的大小.因此,用sizeof对一个类型名操作,得到的是具有该类型实 ...

  9. Java(1)JDK安装

    1.安装JDK开发环境 下载网站:http://www.oracle.com/ 开始安装JDK: 修改安装目录如下: 确定之后,单击"下一步". 注:当提示安装JRE时,可以选择不 ...

  10. iOS关于直播的链接

    iOS关于直播集成的链接 http://www.jianshu.com/p/7b2f1df74420 https://www.cnblogs.com/graveliang/p/5683617.html ...