黑马程序员--评分插件

最新推荐文章于 2024-09-11 23:23:07 发布

huihuidetiantang

最新推荐文章于 2024-09-11 23:23:07 发布

阅读量449

点赞数

分类专栏：传智播客学习文章标签： function xhtml .net jquery 手机 html

本文链接：https://blog.csdn.net/huihuidetiantang/article/details/6894882

版权

传智播客学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

---------------------- Windows Phones 7手机开发、.Net培训、期待与您交流！ ----------------------

在黑马论坛里看到一位朋友提出评分控件是怎么实现的，如淘宝评分那种。争对这个问题，我写了下，只是简单的写了下，主要还是实现星星的变化以及分数为主，我写的这个控件基于JQuery。

源码(没优化)：

<!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>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#divimg").css("cursor","pointer"); //鼠标移到上面去变手指pointer
	$("img").click(function(){
		if($(this).attr("id")=="yi")
		{
			$("#yi").attr("src","Star.gif");
			$("img").not("#yi").attr("src","GrayStar.gif");
			$("#msg").html("1分");
		}
		else if($(this).attr("id")=="er")
		{
			$("#yi,#er").attr("src","Star.gif");
			$("img").not("#yi,#er").attr("src","GrayStar.gif");
			$("#msg").html("2分");
		}
		else if($(this).attr("id")=="san")
		{
			$("#yi,#er,#san").attr("src","Star.gif");
			$("img").not("#yi,#er,#san").attr("src","GrayStar.gif");
			$("#msg").html("3分");
		}
		else if($(this).attr("id")=="si")
		{
			$("#yi,#er,#san,#si").attr("src","Star.gif");
			$("img").not("#yi,#er,#san,#si").attr("src","GrayStar.gif");
			$("#msg").html("4分");
		}
		else
		{
			$("img").attr("src","Star.gif");
			$("#msg").html("5分");
		}
		});
});
</script>
</head>

<body>
<div id="divimg" style="width:120px; height:15px">
<img id = "yi" src="GrayStar.gif" />
<img id = "er" src="GrayStar.gif" />
<img id = "san" src="GrayStar.gif" />
<img id = "si" src="GrayStar.gif" />
<img id = "wu" src="GrayStar.gif" />
<span id="msg">0分</span>
</body>
</html>

效果图：