一个小例子,用JS实现五星评分控件。
代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#dv {
font-size:50px;
width:250px;
background-color:yellow;
cursor:pointer;
}
</style>
<script src="Scripts/jquery-1.7.1.js"></script>
<script>
$(function () {
// 为每一个span加一个属性,标记数字
$("#dv span").each(function (k, v) {
$(this).attr("jk", k);
})
// 当前current,表示当前点击选中的五角星
var current;
$("#dv span").mouseover(function (e) {
if (current) return;
// 如果current里面没有对象就是undefined,就是false
// 如果有了对象,就是true
$(this).text("★").prevAll().text("★").end().nextAll().text("☆");
}).mouseout(function (e) {
if (current) return;
$(this).text("☆").siblings().text("☆");
}).click(function (e) {
if (current) return;
current = this;
});
$("#btn").click(function () {
alert($(current).attr("jk"));
});
});
</script>
</head>
<body>
<div id="dv"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
<hr />
<input type="button" name="name" value="点击获得选中第几颗星" id="btn"/>
</body>
</html>
效果: