jQuery 五角星评分

五角星打分

我用的是搜狗输入法上带的特殊符号打出来的空五角星：☆ 实五角星：★

1.html

1  <ul class="comment">
2         <li>☆</li>
3         <li>☆</li>
4         <li>☆</li>
5         <li>☆</li>
6         <li>☆</li>
7     </ul>

2.css

 1  * {
 2             margin: 0;
 3             padding: 0;
 4         }
 5
 6         .comment {
 7             font-size: 45px;
 8             color: orange;
 9             list-style: none;
10         }
11
12         .comment li {
13             float: left;
14         }

3.jquery

 1  $(function() {
 2             $(".comment li").hover(function() {
 3                 // over
 4                 //prevAll()获取当前元素之前的所有兄弟元素
 5                 $(this).text("★").prevAll().text("★");
 6             }, function() {
 7                 // out
 8                 //如果被点中的话就不变成空的五角星 这里用的是三元一次运算符判断的
 9                 $(this).hasClass("clicked") ? (this).text("★").prevAll().text("★") : $(this).text("☆").prevAll().text("☆");
10             }).click(function() {
11                 //addClass只是用来判断是否被点中
12                 $(this).addClass("clicked").prevAll().addClass("clicked");
13                 //分数
14                 alert(($(this).prevAll().length + 1) * 20 + "分");
15             });
16         })

转载于:https://www.cnblogs.com/xiemin-minmin/p/11027522.html

jQuery 五角星评分相关推荐

html 评分五角星的插件,jquery五角星评分插件示例分享
jQuery五角星评分插件 #rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repea ...
jQuery实现仿五角星评分案例
jQuery实现仿五角星评分案例这两周一直在做网页相关的,最近由于项目需求,又要重新捡起遗失已久的前端了(什么前端不前端,身为一颗螺丝钉,哪里需要往哪打). 重拾jQuery的第一感受,这玩 ...
html点击五角星评分,如何基于jQuery实现五角星评分
1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心.当前位置后面的是空心.注意此处不能完全用链式编程写到底 2. 鼠标离开,comment的所有孩子变为空心五角星.额外,找到current ...
打分系统 php,jquery做出评分系统
这次给大家带来jquery做出评分系统,jquery做出评分系统的注意事项有哪些,下面就是实战案例,一起来看一下. 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo ...
JAVA做一个五星评论打分字体,css简单实现五角星评分、点赞收藏、展现评分（半颗星、1/3颗星）...
1.前言javascript 以前作的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了不少次,每次须要再写的时候,就会翻出以前写过的代码,而后copy过来.总以为这样的话没有进步,没有把知识放进 ...
jQuery五角星案例
jQuery五角星案例文章目录 jQuery五角星案例 <!DOCTYPE html><html lang="en"><head><me ...
html五角星代码,五角星评分系统.html
五角星评分案例 * { padding: 0; margin: 0; } .comment { font-size: 80px; color: orangered; margin-left:600px ...
打分五角星html制作,css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）...
css简单实现五角星评分.点赞收藏.展示评分(半颗星.1/3颗星) 1. 前言之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后 ...
纯CSS实现网站常用的五角星评分和分数展示交互效果
最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...

jQuery 五角星评分

jQuery 五角星评分相关推荐

最新文章

热门文章