这次给大家带来jquery做出评分系统,jquery做出评分系统的注意事项有哪些,下面就是实战案例,一起来看一下。
在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo
五角星评分案例* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: teal;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
- ☆
- ☆
- ☆
- ☆
- ☆
$(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);
})
});
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: