jquery 星星评分

时间: 2023-11-20 20:59:36 浏览: 27
以下是使用jQuery实现星星评分的示例代码: ```html <!-- 在HTML中添加一个包含五个空白星星的容器 --> <div class="stars"> <img src="img/star.png" class="star" data-value="1"> <img src="img/star.png" class="star" data-value="2"> <img src="img/star.png" class="star" data-value="3"> <img src="img/star.png" class="star" data-value="4"> <img src="img/star.png" class="star" data-value="5"> </div> ``` ```javascript // 在JavaScript中添加以下代码 $(document).ready(function() { // 给每个星星添加点击事件 $('.star').click(function() { // 获取当前星星的值 var value = $(this).data('value'); // 将所有星星设置为未选中状态 $('.star').attr('src', 'img/star.png'); // 将当前星星和之前的星星设置为选中状态 for (var i = 1; i <= value; i++) { $('.star[data-value="' + i + '"]').attr('src', 'img/starSel.png'); } // 将评分提交到服务器 commitScore(value); }); }); // 提交评分到服务器的函数 function commitScore(score) { var arr = []; for (var i = 1; i <= 5; i++) { if (i <= score) { arr.push(1); } else { arr.push(0); } } console.log(arr); } ``` 以上代码实现了一个简单的星星评分功能,用户可以点击星星来选择评分,然后将评分提交到服务器。在提交评分的过程中,使用了一个数组来表示评分,数组中的每个元素都是0或1,0表示未选中,1表示选中。

相关推荐

可以使用 rating 插件来实现这个功能,具体步骤如下: 1. 引入 jquery 和 bootstrap 的相关文件: html <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 2. 引入 rating 插件的 JS 和 CSS 文件: html <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-rating/4.0.0/bootstrap-rating.min.js"></script> 3. 在页面中添加一个 input 元素,用于显示评分: html <input id="rating-input" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs"> 其中,min 表示最小值,max 表示最大值,step 表示步长,data-size 表示星星的大小。 4. 初始化 rating 插件: javascript $('#rating-input').rating({ min: 0, max: 5, step: 0.5, size: 'xs', showClear: false, showCaption: false, stars: 5, filledStar: '', emptyStar: '', starCaptions: { 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4', 4.5: '4.5', 5: '5' }, starCaptionClasses: function(val) { if (val < 3) { return 'text-danger'; } else { return 'text-primary'; } } }); 其中,showClear 和 showCaption 分别表示是否显示清除按钮和评分说明,stars 表示星星的数量,filledStar 和 emptyStar 分别表示填充和未填充的星星的图标,starCaptions 表示每个评分对应的说明,starCaptionClasses 表示每个评分说明的样式。 通过以上步骤,就可以实现鼠标点击星星评分可以选半个的效果。
jQuery插件raty是一个用于创建星级评分的工具。以下是raty中文文档的使用说明: 1. 引入raty.js文件和jquery.js文件: html <script src="jquery.js"></script> <script src="raty.js"></script> 2. 创建一个元素来显示评分: html 3. 通过JavaScript代码来初始化评分: javascript $('#star').raty({ path: 'images/', // 图片文件的路径 score: 3, // 初始化评分 click: function(score, event) { // 点击评分时的回调函数 alert('您给了 ' + score + ' 分'); } }); 以上代码中,path属性指定了图片文件的路径,score属性指定了初始化评分,click回调函数在评分被点击时被调用。 4. 可以使用其他选项来自定义raty的外观和行为,例如: javascript $('#star').raty({ path: 'images/', starOn: 'star-on.png', // 选中时的星星图片 starOff: 'star-off.png', // 未选中时的星星图片 starHalf: 'star-half.png', // 半选中时的星星图片 half: true, // 允许半选中 readOnly: true, // 只读模式 hints: ['差', '一般', '好', '很好', '非常好'], // 显示提示文本 score: function() { // 动态获取评分 return $(this).attr('data-score'); }, click: function(score, event) { alert('您给了 ' + score + ' 分'); } }); 以上代码中,starOn、starOff和starHalf属性指定了不同状态下的星星图片,half属性允许半选中,readOnly属性设置为true表示只读模式,hints属性用于显示提示文本,score属性可以用函数来动态获取评分。

最新推荐

OpenAI发布文生视频模型Sora 视频12

sora OpenAI发布文生视频模型Sora 视频12

requests-0.6.2.tar.gz

py依赖包

全国34个省份2000-2021高等学校科技产出-理工农医类高等学校科技产出-发表科技论文.xlsx

数据年度2000-2021 数据范围:全国34个省份,含港澳台 数据年度:2000-2021,22个年度的数据 excel数据文件包原始数据(由于多年度指标不同存在缺失值)、线性插值、ARIMA填补三个版本,提供您参考使用。 其中,ARIMA回归填补无缺失值。 填补说明: 线性插值。利用数据的线性趋势,对各年份中间的缺失部分进行填充,得到线性插值版数据,这也是学者最常用的插值方式。 ARIMA回归填补。基于ARIMA模型,利用同一地区的时间序列数据,对缺失值进行预测填补。

requests-0.3.4.tar.gz

py依赖包

全国34个省份2000-2021研究与开发机构RD课题投入经费从业人员全时当量博士硕士本科基础应用研究机构数.zip

数据年度2000-2021 数据范围:全国34个省份,含港澳台 数据年度:2000-2021,22个年度的数据 excel数据文件包原始数据(由于多年度指标不同存在缺失值)、线性插值、ARIMA填补三个版本,提供您参考使用。 其中,ARIMA回归填补无缺失值。 填补说明: 线性插值。利用数据的线性趋势,对各年份中间的缺失部分进行填充,得到线性插值版数据,这也是学者最常用的插值方式。 ARIMA回归填补。基于ARIMA模型,利用同一地区的时间序列数据,对缺失值进行预测填补。

网络技术-综合布线-河南农村宽带客户细分的研究.pdf

网络技术-综合布线-河南农村宽带客户细分的研究.pdf

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire

理解Socket编程的基础概念

# 1. 介绍Socket编程的基本概念 ## 1.1 什么是Socket编程 Socket编程是一种在网络编程中使用的抽象概念,它允许应用程序通过网络进行通信。通过Socket编程,可以实现客户端与服务器端之间的数据交换和通信。 ## 1.2 Socket编程的应用范围 Socket编程广泛应用于网络通信领域,包括但不限于Web服务、即时通讯、网络游戏、远程控制等。 ## 1.3 Socket编程的基本原理 Socket编程基于网络套接字(socket)的概念,通过套接字建立连接、传输数据和关闭连接来实现通信。在Socket编程中,使用不同的协议(如TCP、UDP)来实现数据传输和通信

c语言桌子上有几堆糖果,每堆糖果的数量记录在一个整型数组 nums 中。我们可以每次选择任意一堆,拿走其中的一颗或者两颗糖果,求拿完所有糖果的最少次数。

好的,以下是 C 语言的实现代码: ```c #include <stdio.h> #include <stdlib.h> int min(int a, int b) { return a < b ? a : b; } int minSteps(int* nums, int numsSize) { int dp[numsSize + 1]; dp[0] = 0; dp[1] = 1; for (int i = 2; i <= numsSize; i++) { dp[i] = min(dp[i-1] + 1, dp[i-2] + 1)

供应链管理制度(全).ppt

供应链管理制度