JQuery实现打星星（五星好评）功能
实现效果:鼠标移上去某个星星，他和他前面所有的星星变红，离开全变黑。如果在上边点了某个星星在离开，就会保持
emmmmmm还挺有意思
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="commons/basePath.jsp" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/createXHR.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style>
#hoshi li{
font-size:50px;
float: left;
cursor: pointer;
list-style-type:none;
}
</style>
<script type="text/javascript">
$(function(){
var flag = true;
$("#hoshi li").mouseover(function(){
$(this).nextAll().css("color","black").end().prevAll().addBack().css("color","red");
}).mouseout(function(){
if(flag){
$(this).siblings().addBack().css("color","black");
}else{
flag =true;
}
}).click(function(){
flag = false;
})
});
</script>
<title>首页</title>
</head>
<body>
<div>
<ul id="hoshi">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="commons/basePath.jsp" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/createXHR.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style>
#hoshi li{
font-size:50px;
float: left;
cursor: pointer;
list-style-type:none;
}
</style>
<script type="text/javascript">
$(function(){
var flag = true;
$("#hoshi li").mouseover(function(){
$(this).nextAll().css("color","black").end().prevAll().addBack().css("color","red");
}).mouseout(function(){
if(flag){
$(this).siblings().addBack().css("color","black");
}else{
flag =true;
}
}).click(function(){
flag = false;
})
});
</script>
<title>首页</title>
</head>
<body>
<div>
<ul id="hoshi">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="commons/basePath.jsp" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/createXHR.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style>
#hoshi li{
font-size:50px;
float: left;
cursor: pointer;
list-style-type:none;
}
</style>
<script type="text/javascript">
$(function(){
var flag = true;
$("#hoshi li").mouseover(function(){
$(this).nextAll().css("color","black").end().prevAll().addBack().css("color","red");
}).mouseout(function(){
if(flag){
$(this).siblings().addBack().css("color","black");
}else{
flag =true;
}
}).click(function(){
flag = false;
})
});
</script>
<title>首页</title>
</head>
<body>
<div>
<ul id="hoshi">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
