jQuery五角星案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: pink;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script>
$(function () {
var wjx_k = "☆";
var wjx_s = "★";
$(".comment > li").on("mouseenter", function () {
$(this).text(wjx_s).prevAll().text(wjx_s);
$(this).nextAll().text(wjx_k);
});
$(".comment").on("mouseleave", function () {
$(this).children().text(wjx_k);
$("li.current").text(wjx_s).prevAll().text(wjx_s);
});
$(".comment>li").on("click", function () {
$(this).addClass("current").siblings().removeClass("current");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
|