这次给大家带来jquery做出评分系统,jquery做出评分系统的注意事项有哪些,下面就是实战案例,一起来看一下。
在电商网站,我们经常会用到五星评分的功能,现在用jquery实现一个简单的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>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
datatable插件可以实现异步加载吗?
jquery必须掌握的api
怎样实现文件上传带进度条动画
jquery实现多层验证后的表单验证
以上就是jquery做出评分系统的详细内容。