jQuery 完成简单又好看的五角星带评分功能~

最新推荐文章于 2021-08-17 23:06:16 发布

jcat_李小黑

最新推荐文章于 2021-08-17 23:06:16 发布

阅读量577

点赞数 1

分类专栏： H5C3 JavaScript 文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_43216105/article/details/104469980

版权

这篇博客介绍了如何利用jQuery来创建一个简单的五角星评分功能。通过引入jQuery库，结合HTML、CSS和JavaScript代码，实现了点击星星切换背景图片以展示评分效果。

摘要由CSDN通过智能技术生成

1.引入jQuery

    <script src="./js/jquery.min.js"></script>

2.代码

总结其实就是换背景图。。

html

   <div class="statsBox clearfix">
        <div class="formItemDiff formItemDiffFirst"></div>
        <div class="formItemDiff"></div>
        <div class

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jcat_李小黑

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

五角星评分、爱心评分、评分

10-25

五角星评分、爱心评分、评分

jQuery之五角星评分案例

a1k2l45k的博客

05-29

1983

背景 五角星评分是我们常见的打分方式，今天就用jquery来写一个五角星评分在此，css内容不再写需求将鼠标放在五角星上，此五角星和它之前的五角星都会变成实心五角星，后面的变成空心当鼠标离开时，所有五角星都会变成空心当某个五角星被点击后，鼠标离开五角星后，此五角星与其前面的五角星都会变成实心，后面的变成空心实现方法 1.定义两个五角星，一个空心，一个实心 var ...

参与评论您还未登录，请先登录后发表或查看评论

js网页特效漂亮的星级评价效果

weixin_34407348的博客

04-03

201

<html> <head> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <title>js网页特效漂亮的星级评价效果</title> <style type="text/css"&amp

用 HTML 和 CSS 制作的五角星评分小部件

qq_25503949的博客

05-22

680

使用 HTML & CSS 制作左侧滑动导航条

jQuery实现仿五角星评分案例

weixin_42194060的博客

11-15

995

jQuery实现仿五角星评分案例这两周一直在做网页相关的，最近由于项目需求，又要重新捡起遗失已久的前端了(什么前端不前端，身为一颗螺丝钉，哪里需要往哪打)。重拾jQuery的第一感受，这玩意用起来真的太舒服。由于要实现仿五角星评分的效果，故采用jQuery的方式实现。图例如下，案例描述：现在有五颗五角星，当我们鼠标在五角星上滑动时，对应的五角星以及它前面的五角...

jQuery简单实用的五角星评分特效

06-24

jQuery简单实用的五角星评分特效有几个特点，第一给所有的li注册mouseenter事件，第二让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心，第三离开ul的时候，把所有的li变成空心。

jquery五角星评分插件示例分享

10-26

#### 知识点一：jQuery五角星评分插件概念 五角星评分插件是一种用户界面组件，通常用于电子商务网站、论坛、博客评论等，以便用户对产品、服务或内容进行打分。该插件允许用户通过点击五角星来选择分数，并将这个...

简单实用的五角星评分jQuery代码

06-10

简单实用的五角星评分jQuery代码有几个特点，第一给所有的li注册mouseenter事件，第二让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心，第三离开ul的时候，把所有的li变成空心。

如何基于jQuery实现五角星评分

10-14

本篇将详细讲解如何利用jQuery实现五角星评分功能。首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及动画效果等任务。在实现五角星评分系统时，我们将利用jQuery提供的事件监听和DOM操作功能...

jquery超漂亮树形控件

04-27

jquery超漂亮树形控件

js+html星级评分（支持半星）

11-21

javascript+html星级评分（支持半星）,通过一个下拉选择框控制星星的多少。

html点击五角星评分,CSS3 星星打分

weixin_29607637的博客

06-21

347

cssbody {text-align: center;background-color: #34495e;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}h1 {color: #FFF;font-weight: 500;padding: 30px;text-shadow: 0 3px 3px #2b3c4e;}input ...

html点击五角星评分,如何基于jQuery实现五角星评分

weixin_29712031的博客

06-21

375

1. 鼠标经过li的时候，当前的位置是实心五角星，前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底2. 鼠标离开，comment的所有孩子变为空心五角星。额外，找到current, 让current和它的前面都是实心。3. 点击li的时候，当前的位置增加个current的class, 其余位置移除current代码如下五角星评分案例* {padding: 0;margin: 0...

Jq五角星评分效果

pengyaou的博客

09-17

309

利用Jq和CSS实现的简单的五角星评分效果。五角星采用图片。在线演示及代码

jQuery五角星案例

nsnydnz的博客

08-17

231

jQuery五角星案例文章目录jQuery五角星案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-

jQuery 五角星评分案例（详细代码）

卡尔特斯

10-29

928

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; ma

jquery03-05用户评论五角星案例

一笑的博客

11-08

441

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul { list-styl

HTML+CSS实现五角星评分效果

最新发布

05-31

HTML代码： ```html <div class="star-rating"> <span class="fa fa-star-o" data-rating="1"></span> <span class="fa fa-star-o" data-rating="2"></span> <span class="fa fa-star-o" data-rating="3"></span> <span class="fa fa-star-o" data-rating="4"></span> <span class="fa fa-star-o" data-rating="5"></span> <input type="hidden" name="rating" class="rating-value" value="0"> </div> ``` jQuery代码： ```javascript $(document).ready(function(){ $('.star-rating .fa').on('click', function(){ var rating = $(this).data('rating'); $(this).closest('.star-rating').find('.fa').removeClass('fa-star').addClass('fa-star-o'); $(this).prevAll('.fa').removeClass('fa-star-o').addClass('fa-star'); $(this).removeClass('fa-star-o').addClass('fa-star'); $(this).closest('.star-rating').find('.rating-value').val(rating); }); $('.star-rating .fa').on('mouseover', function(){ var rating = $(this).data('rating'); $(this).closest('.star-rating').find('.fa').removeClass('fa-star').addClass('fa-star-o'); $(this).prevAll('.fa').removeClass('fa-star-o').addClass('fa-star'); $(this).removeClass('fa-star-o').addClass('fa-star'); $(this).closest('.star-rating').find('.rating-value').val(rating); }); $('.star-rating').on('mouseout', function(){ var rating = $(this).find('.rating-value').val(); $(this).closest('.star-rating').find('.fa').removeClass('fa-star').addClass('fa-star-o'); $(this).find('.fa').each(function(index){ if (index < rating) { $(this).removeClass('fa-star-o').addClass('fa-star'); } else { $(this).removeClass('fa-star').addClass('fa-star-o'); } }); }); }); ``` 这段代码实现了一个五角星评分的功能，用户可以通过鼠标点击或鼠标滑过来选择评分，最终评分的值会保存在一个隐藏的input元素中，可以提交到后台进行处理。

jQuery 完成简单又好看的 五角星带评分功能~

1.引入jQuery

2.代码

html

jQuery 完成简单又好看的五角星带评分功能~