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,鼠标点击可以打 ...
随机推荐
- Linux下的压缩和解压缩命令——jar
原文链接:http://blog.chinaunix.net/uid-692788-id-2681136.htmlJAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包.当然也是有 ...
- Eclipse设置黑色主题
1点击help--->install new software 2输入 http://eclipse-color-theme.github.com/update 3下载安装eclipse col ...
- 基础知识《十》unchecked异常和checked异常
运行时异常在运行期间才能被检查出来,一般运行期异常不需要处理.也称为unchecked异常.Checked异常在编译时就能确定,Checked异常需要自己处理. checked 异常也就是我们经常遇到 ...
- 《转载》跟我学spring3
一.<跟我学spring3>电子书下载地址: <跟我学spring3> (1-7 和 8-13) http://jinnianshilongnian.iteye.com/bl ...
- Python flask 基于 Flask 提供 RESTful Web 服务
转载自 http://python.jobbole.com/87118/ 什么是 REST REST 全称是 Representational State Transfer,翻译成中文是『表现层状态转 ...
- tp5 中 model 的获取器
在获取数据的字段值后自动进行处理 // 模型中写入如下代码,则查询结果会自动将status的结果进行转换 class User extends Model { public function getS ...
- POJ 2823 Sliding Window 线段树区间求和问题
题目链接 线段树区间求和问题,维护一个最大值一个最小值即可,线段树要用C++交才能过. 注意这道题不是求三个数的最大值最小值,是求k个的. 本题数据量较大,不能用N建树,用n建树. 还有一种做法是单调 ...
- CMS系统存储路径
CMS系统特点:前后端分离 index.html 首页文件index.php 管理后台的页面 api文件夹: 提供的接口 caches文件夹: 缓存文件 html文件夹: 生成的静态页面 phpcm ...
- Redis的Python实践,以及四中常用应用场景详解——学习董伟明老师的《Python Web开发实践》
首先,简单介绍:Redis是一个基于内存的键值对存储系统,常用作数据库.缓存和消息代理. 支持:字符串,字典,列表,集合,有序集合,位图(bitmaps),地理位置,HyperLogLog等多种数据结 ...
- Java笔记:文件夹操作
创建目录: File类中有两个方法可以用来创建文件夹: mkdir( )方法创建一个文件夹,成功则返回true,失败则返回false.失败表明File对象指定的路径已经存在,或者由于整个路径还不存在, ...