<!DOCTYPE html>
/*
五、五星好评
评分五角星随鼠标移动显示（当鼠标放在五角星上时前面的显示为黑色，后面的显示白色五角星）
当鼠标放到哪个星星上时，之前的星星显示黑色，之后的显示白色星
*/
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.0.min.js"></script>
</head>
<body>
<table align="center">
<tr>
<td id="1">☆</td>
<td id="2">☆</td>
<td id="3">☆</td>
<td id="4">☆</td>
<td id="5">☆</td>
</tr>
</table>
<script>
var flag=false;
$("td").mouseover(function(e){
var pres = e.target;
change(pres);
});
$("td").mouseout(function(e){
var pres = e.target;
changeback(pres);
});
$("td").click(function(e){
var pres = e.target;
change(pres);
if(flag){
flag=false;
}else{
flag=true;
}
});
function change(pres){
$("td").each(function(index,element){
if(index+1<=pres.id){
$(element).html("★");
}else {
$(element).html("☆");
}
flag=false;
});
}
function changeback(){
if(!flag){
$("td").each(function(index,element){
$(element).html("☆");
});
}
}
</script>
</body>
</html>
