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,鼠标点击可以打 ...
随机推荐
- 基于SS5服务端的Socks5客户端
SS5停止更新已经好几年了,用作socks5代理的服务端还是比较稳定的.但是如果要使用加密账号和密码的协议,有些坑需要去填. 1.服务端的账号密码验证方式配置为“s”时,客户端进行协议验证时,需要用“ ...
- selenium page object & Page Factory
package demo; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.openqa ...
- ffmpeg-201612[01,08,10,17,21,27,30]-bin.7z
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 5 屏幕横向放大 20 像素 6 屏幕横向缩小 20 像素 S 下一帧 [ -2秒 ] +2 ...
- 在WinCC中通过VBS操作SQL Server2005
在项目中需要在一定条件满足时,保存一些数据到数据库中,并可根据条件查询.考虑到WinCC6.2以后采用的就是SQL Server2005数据库,所以直接利用该数据库即可,通过SQL Server Ma ...
- tp框架获取常量信息、方法、命名空间
获取系统常量信息: public function ShowInFo() { var_dump(get_defined_constants(true)); //如果参数为true,则分类显示 } 在这 ...
- freemarker 中文乱码
<bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker ...
- APP产品交互设计分析总结(不断更新中...)
1.首页中的最下方的TAB和中部的TAB的区别 最下面的tab按钮应该是核心级模块级的大功能入口 中间的按钮应该是次核心级页面级的小功能入口 2.对于编辑是在单页内实现好还是跳转到新页面实现好 内容比 ...
- sk_buff封装和解封装网络数据包的过程详解
转自:http://www.2cto.com/os/201502/376226.html 可以说sk_buff结构体是Linux网络协议栈的核心中的核心,几乎所有的操作都是围绕sk_buff这个结构体 ...
- WPF时间格式化
日期格式化示例: <TextBox Name="txtCreateTime" HorizontalAlignment="Left" Width=&quo ...
- CMD安装/删除服务
服务安装 sc create "ddd" binpath= "D:\winservice\XXX\XXX.exe" 服务删除 sc delete "d ...