wex5中的星星评分
新建一个空白的.w文件,然后在页面上放5个img星星图片

重要的是图片路径不能是绝对路径,要用相对路径,不然js操作的时候会出bug

添加两个label标签(标签随你挑,在这我就用label)

你到时候可以用他自带的xid去控制,或者自定义一个id

接下来就是js部分

双击回跳转到js部分,它就会自动创建一个click事件

下面就是操作源码:
// debugger;
for(var i = 0;i <$("img").length;i++){
// endsWith判断字符的结尾是否与指定的字符串相匹配
if($("img").eq(i).attr('src').endsWith("red.png")){
$("img").eq(i).attr('src','img/star-yellow.png' );
}
}
var index = event.currentTarget.dataset.index-0;
for(var i = 0;i <=index;i++){
$("img").eq(i).attr('src','img/star-red.png');
}
//index-0进行隐式转换成number
$("#score").text(index + 1 + '分').css;
var x;
switch (index){
case 0:x=" (与卖家描述的严重不符,非常不满)";
break;
case 1:x="(与卖家描述的不符,不满意)";
break;
case 2:x="(没有卖家描述的那么好)";
break;
case 3:x="(与卖家描述的基本一致,还是挺满意的)";
break;
case 4:x="(与卖家描述的完全一致,非常满意)";
break;
}
$("#s").text(x);
最终效果

wex5中的星星评分的更多相关文章
- iOS 类似美团或饿了么评价中的星星评分控件
1.做的好几个项目都用到了评分控件,可以用来展示评分,也可以用来写评分,图片和间距大小都可以定制,之前就已经简单封装了一个,现在把它分享出来,有需要的拿去用. 2.下面是展示截图: image.p ...
- angularjs实现星星评分
angularjs实现星星评分 自定义指令 app.directive('myStars', function () { return { require : '?ngModel', // ?ngMo ...
- ivew使用星星评分
这组件好像有问题,不知道是我们项目环境造成的还是什么,初始化半星不能正常显示,显示的全星. 1.template <div style="display:inline-block;ma ...
- HTML5商城开发三 jquery 星星评分插件
展示:
- 在WeX5中导入项目
在WeX5中导入项目 首先右击,选择[导入]--[导入] 得到如下的对话框,选择[现有项目到工作空间中] 在导入对话框中选择相应的根目录,选择相应的项目,确定 点击完成即可.这样一个项目就被导入到了W ...
- js点亮星星评分并获取参数的js代码
点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...
- vue2.0:(九)、外卖App弹窗部分星星评分
本篇是星星评分部分,先上代码: 1.header.vue: <template> <transition name="fade"> & ...
- Android星星评分控件RatingBar的使用
在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...
- vue 星星评分组件
显示评分和打分组件,可现实半颗星星效果 效果图: 参数名 类型 说明 score Number 分数 ,默认0,保留一位小数 disabled Boolean 是否只读,默认false,鼠标点击可以打 ...
随机推荐
- C#对象先序列化然后反序列化时间丢失八小时的问题
把对象JSON序列化,然后反序列化后发现时间少了八小时.因为在东八区,所以序列的时候按照1970-01-01:08:00:00为基数取得差值,而反序列化的时候以1970-01-01:00:00:00作 ...
- PCA 协方差矩阵特征向量的计算
人脸识别中矩阵的维数n>>样本个数m. 计算矩阵A的主成分,根据PCA的原理,就是计算A的协方差矩阵A'A的特征值和特征向量,但是A'A有可能比较大,所以根据A'A的大小,可以计算AA'或 ...
- A Complete List of .NET Open Source Developer Projects
http://scottge.net/2015/07/08/a-complete-list-of-net-open-source-developer-projects/?utm_source=tuic ...
- MySQLFabric连接的编码问题
今天解决的一个小问题.最终的解决方案很简单,主要是讲一下解决问题的思路. 测试人员在服务器上测试,页面提交的中文内容存入数据库中以后,是乱码. 开发人员在本机上测试,没有问题. 服务器上使用的是Mys ...
- 【转】代码中特殊的注释技术——TODO、FIXME和XXX的用处
(转自:http://blog.csdn.net/reille/article/details/7161942) 作者:reille 本博客网址:http://blog.csdn.net/reille ...
- Linux学习日记之磁盘与档案系统
主要定义 磁盘的物理组成磁盘主要由圆形磁盘(多张).机械手臂.磁头等组成.每张磁盘都有不同的磁道,半径相同的磁道组成了磁柱,沿着中心划线可将磁盘分成若干扇区,每个扇区的大小是512Bytes. 磁盘分 ...
- 【转】linux sort 命令详解
sort是在Linux里非常常用的一个命令,管排序的,集中精力,五分钟搞定sort,现在开始! 1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按AS ...
- 将plist文件读取成为数组
NSString *plistPath = [[NSBundle mainBundle] pathForResource:@"city" ofType:@"plist&q ...
- LightGBM中GBDT的实现
现在LightGBM开源了,这里将之前的一个文档发布出来供大家参考,帮助更快理解LightGBM的实现,整体思路应该是类似的. LightGBM优雅,快速,效果好,希望LightGBM越来越好:) L ...
- Pyqt 基础功能
总结Pyqt的基础知识 1. Pyqt 设置禁止最大化及禁止拖拽窗口大小 # PyQT禁止窗口最大化按钮: self.setWindowFlags(QtCore.Qt.WindowMinimizeB ...