jQuery之五角星评分案例
背景
五角星评分是我们常见的打分方式，今天就用jquery来写一个五角星评分
在此，css内容不再写
需求
- 将鼠标放在五角星上，此五角星和它之前的五角星都会变成实心五角星，后面的变成空心
- 当鼠标离开时，所有五角星都会变成空心
- 当某个五角星被点击后，鼠标离开五角星后，此五角星与其前面的五角星都会变成实心，后面的变成空心
实现方法
1.定义两个五角星，一个空心，一个实心
var one="☆";
var two="★";2.为每个五角星设置一个鼠标进入事件，事件函数要实现的功能是此五角星和它之前的五角星都会变成实心五角星，后面的变成空心
$("li").on("mouseenter",function(){
$(this).text(two).prevAll("li").text(two).end().nextAll("li").text(one);
});
3.为每个五角星设置一个鼠标离开事件，事件函数要实现的功能是，当鼠标离开时，所有五角星都会变成空心
$("li").on("mouseleave",function(){
if($(".current").length===0)
{
$("li").text(one);
}
else{
$("li.current").text(two).prevAll("li").text(two).end().nextAll("li").text(one);
$("li.current").removeAttr("class");
}
})
3.为每个五角星设置一个鼠标点击事件，事件函数要实现的功能是为点击的五角星添加一个类，这样做的目的是，当鼠标离开五角星时， 能够让触发点击事件的五角星前的五角星变为实心
$("li").on("click",function(){
$(this).attr("class","current").siblings().removeAttr("class");
})整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
li{
float: left;
font-size: 50px;
color: red;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var one="☆";
var two="★";
$("li").on("mouseenter",function(){
$(this).text(two).prevAll("li").text(two).end().nextAll("li").text(one);
});
$("li").on("mouseleave",function(){
if($(".displayd").length===0)
{
$("li").text(one);
}
else{
$("li.current").text(two).prevAll("li").text(two).end().nextAll("li").text(one);
$("li.current").removeAttr("class");
}
})
$("li").on("click",function(){
$(this).attr("class","displayd").siblings(”li").removeAttr("class");
})
})
</script>
<body>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
