|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
|
<script src="jquery-3.4.1.min.js"></script> |
|
<title>打星星评分</title> |
|
<style> |
|
*{ |
|
margin: 0; |
|
padding: 0; |
|
} |
|
.content1,.content2{ |
|
display: inline-block; |
|
} |
|
.content1{ |
|
margin-left: 50px; |
|
margin-top: 20px; |
|
} |
|
.content2{ |
|
position: relative; |
|
left: 0; |
|
top: -9px; |
|
} |
|
span{ |
|
display: none; |
|
color: red; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="content1"> |
|
<img src="empty.png" alt="1"> |
|
<img src="empty.png" alt="2"> |
|
<img src="empty.png" alt="3"> |
|
<img src="empty.png" alt="4"> |
|
<img src="empty.png" alt="5"> |
|
</div> |
|
<div class="content2"> |
|
<span>很差</span> |
|
<span>较差</span> |
|
<span>一般</span> |
|
<span>较好</span> |
|
<span>很好</span> |
|
</div> |
|
|
|
<script> |
|
let i=-1; |
|
let over = function(){ |
|
$("img").attr("src","empty.png"); |
|
$("span").css("display",'none'); |
|
let index = $(this).index(); |
|
$(this).attr("src","shining.png"); |
|
$(`img:lt(${index})`).attr("src","shining.png"); |
|
$("span").css("display",'none'); |
|
$("span").eq(index).css("display","inline"); |
|
} |
|
|
|
let out = function(){ |
|
let index = $(this).index(); |
|
$(this).attr("src","empty.png"); |
|
$(`img:lt(${index})`).attr("src","empty.png"); |
|
$("span").css("display",'none'); |
|
|
|
if(i !=-1){ |
|
$("img").attr("src","empty.png"); |
|
$("span").css("display",'none'); |
|
$("img").eq(i).attr("src","shining.png"); |
|
$(`img:lt(${i})`).attr("src","shining.png"); |
|
$("span").eq(i).css("display","inline"); |
|
} |
|
|
|
} |
|
|
|
$("img").hover(over,out); |
|
|
|
$("img").click(function(){ |
|
$("img").off("hover"); |
|
let index = $(this).index(); |
|
i=index; |
|
console.log(index); |
|
|
|
$(this).attr("src","shining.png"); |
|
$(`img:lt(${index})`).attr("src","shining.png"); |
|
$("span").css("display",'none'); |
|
$("span").eq(index).css("display","inline"); |
|
}); |
|
|
|
|
|
</script> |
|
</body> |
|
</html> |