<!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. 清空nohup日志

    #清空nohup日志cat /dev/null > /tpdata/www/wxapp_domain/nohup.out

  2. 服务器日志文件Web远程查看

    公司买的一款企业应用软件,所有透过应用操作DB的操作都会生成有日志,日志是以文本文件的形式存放在服务器上,后缀名为*.log.1,*.log.2之类的,软件本身也提供功能查询这些日志,但这个查询的功能 ...

  3. json字符串 转Java List 简单方法

    JSONArray jsonArr = JSONArray.fromObject(jsonStr); List<Map<String,Object>> listMap = (L ...

  4. liteos 从入门到放弃

    这两天收到一份sdk,hisi 3516cv200 liteos的sdk 正好手头有硬件,就随便编译玩玩. 解压sdk. Hi3518E_SDK_V5.0.5.0 ll@ubuntu:~/work20 ...

  5. Linux下系统时间函数、DST等相关问题总结(转)

    Linux下系统时间函数.DST等相关问题总结 下面这个结构体存储了跟时区相关的位移量(offset)以及是否存在DST等信息,根据所在的时区信息,很容易找到系统时间与UTC时间之间的时区偏移,另外根 ...

  6. Netty源码分析之服务端启动

    Netty服务端启动代码: public final class EchoServer { static final int PORT = Integer.parseInt(System.getPro ...

  7. 【题解】Luogu P5071 [Ynoi2015]此时此刻的光辉

    众所周知lxl是个毒瘤,Ynoi道道都是神仙题,题面好评 原题传送门 一看这题没有修改操作就知道这是莫队题(我也只会莫队) 我博客里对莫队的简单介绍 一个数N可以分解成\(p_1^{c_1}p_2^{ ...

  8. UI自动化(十)selenium定位

    浏览器操作   1 2 3 4 5 6 7 8 # 刷新 driver.refresh()   # 前进 driver.forward()   # 后退 driver.back() 获取标签元素   ...

  9. JS设计模式(8)模板方法模式

    什么是模板方法模式? 定义:定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 主要解决:一些方法通用,却在每一个子类都重新 ...

  10. Python3 tkinter基础 OptionMenu 点击按钮,出现单选的下拉列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...