小蜗牛xmg

jq demo 点击评分组件 

<!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>

　　

posted on 2017-06-21 16:48  小蜗牛xmg  阅读(121)  评论(0)    收藏  举报

导航