jquery 制作评分控件

最新推荐文章于 2019-10-21 00:36:01 发布

Sunqlive

最新推荐文章于 2019-10-21 00:36:01 发布

阅读量440

点赞数

分类专栏： jquery 文章标签： jquery 控件鼠标移动

本文链接：https://blog.csdn.net/Sunqlive/article/details/52368806

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>
<title></title>
<script src="jQuery/scritps/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//为每个td注册一个mouseover事件
$('#t1 td').mouseover(function () {
$(this).text('★').prevAll().text('★').end().nextAll().text('☆');
}).mouseout(function () {
//当鼠标移开的时候把所有的Td都变成☆，把所有isclicked属性的Td以及之前的td变成★
$('#t1 td').text('☆');
$('#t1 td[isclicked=isclicked]').text('★').prevAll().text('★');
}).click(function () {
$(this).attr('isclicked', 'isclicked').siblings().removeAttr
('isclicked'); //等价于setAtttribute()
//点击某个td的时候显示分数
$('#pscore').text($(this).attr('score'));
}).attr('score', function (index) {
return (index + 1) * 20;
});
})
</script>
<style type="text/css">
td
{font-size:50px;
color:Yellow;
cursor:pointer;
}
</style>
</head>
<body>
<p id="pscore">
</p>
<table id="t1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>☆
</td>
<td>☆
</td>
<td>☆
</td>
<td>☆
</td>
<td>☆
</td>
</tr>
</table>