淘宝评分控件怎么实现 - 黑马程序员技术交流社区

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

复制代码