在电商网站,我们经常会用到五星评分的功能,本文主要为大家详细介绍了基于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);
})
});
相关推荐: