这篇文章主要为大家详细介绍了基于 jquery 实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在电商网站,我们经常会用到五星评分的功能,现在用 jQuery 实现一个简单的 demo:
1. 引入 jQuery例子中我使用的是在线 jQuery:
2.jQuery 方法说明:prevAll:如果给定一个表示 DOM 元素集合的 jQuery 对象,.prevAll() 方法允许我们在 DOM 树中搜索这些元素前面的同胞元素,并用匹配元素构造一个新的 jQuery 对象。
nextAll:如果给定一个表示 DOM 元素集合的 jQuery 对象,.nextAll() 方法允许我们搜索 DOM 树中的元素跟随的同胞元素,并用匹配元素构造新的 jQuery 对象。
addClass:向被选元素添加一个或多个类。
removeClass:从被选元素移除一个或多个类。
html:该方法返回或设置被选元素的内容 (inner HTML)。当使用该方法设置一个值时,它会覆盖所有匹配元素的内容。
text:该方法方法设置或返回被选元素的文本内容。当该方法用于返回一个值时,它会返回所有匹配元素的组合的文本内容(会删除 HTML 标记)。
3. 样式 css简单样式:
* {padding: 0; margin: 0;}
.comment {font-size: 40px; color: teal;}
.comment li {float: left;}
ul {list-style: none;}
4.html 结构 5. 完整代码:仅列出关键 jQuery 代码:
效果:
博客园的前端群:640633433
欢迎大家关注我的微信号公众号,公众号名称:web 前端 EDU。
来源: http://www.jianshu.com/p/69f7a953fa39