Home > Article > Web Front-end > How to achieve five-star praise using jquery
How to achieve five-star praise using jquery
- 小云云Original
- 2017-12-09 13:16:053040browse
This article mainly introduces in detail how to achieve five-star praise based on jquery. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
In e-commerce websites, we often use the five-star rating function. Now we use jQuery to implement a simple demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: teal;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
var wjx_k = "☆";
var wjx_s = "★";
//prevAll获取元素前面的兄弟节点，nextAll获取元素后面的所有兄弟节点
//end 方法；返回上一层
//siblings 其它的兄弟节点
//绑定事件
$("li").on("mouseenter", function () {
$(this).html(wjx_s).prevAll().html(wjx_s).end().nextAll().html(wjx_k);
}).on("click", function () {
$(this).addClass("active").siblings().removeClass("active")
});
$("ul").on("mouseleave", function () {
$("li").html(wjx_k);
$(".active").text(wjx_s).prevAll().text(wjx_s);
})
});
</script>
</body>
</html>
Related recommendations:
jquery implements sliding verification on PC
How to use jQuery to achieve the magnifying glass effect
How to use js and jquery to achieve infinite loading of pages
The above is the detailed content of How to achieve five-star praise using jquery. For more information, please follow other related articles on the PHP Chinese website!