新建一个空白的.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中的星星评分的更多相关文章

  1. iOS 类似美团或饿了么评价中的星星评分控件

    1.做的好几个项目都用到了评分控件,可以用来展示评分,也可以用来写评分,图片和间距大小都可以定制,之前就已经简单封装了一个,现在把它分享出来,有需要的拿去用. 2.下面是展示截图:   image.p ...

  2. angularjs实现星星评分

    angularjs实现星星评分 自定义指令 app.directive('myStars', function () { return { require : '?ngModel', // ?ngMo ...

  3. ivew使用星星评分

    这组件好像有问题,不知道是我们项目环境造成的还是什么,初始化半星不能正常显示,显示的全星. 1.template <div style="display:inline-block;ma ...

  4. HTML5商城开发三 jquery 星星评分插件

    展示:

  5. 在WeX5中导入项目

    在WeX5中导入项目 首先右击,选择[导入]--[导入] 得到如下的对话框,选择[现有项目到工作空间中] 在导入对话框中选择相应的根目录,选择相应的项目,确定 点击完成即可.这样一个项目就被导入到了W ...

  6. js点亮星星评分并获取参数的js代码

    点亮星星评分后,点击按钮,立即获得分数参数值,方便不想使用ajax传参的朋友 http://demo.jb51.net/js/2014/jsxxdf/demo2.html <!DOCTYPE h ...

  7. vue2.0:(九)、外卖App弹窗部分星星评分

    本篇是星星评分部分,先上代码: 1.header.vue: <template> <transition name="fade">            & ...

  8. Android星星评分控件RatingBar的使用

    在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...

  9. vue 星星评分组件

    显示评分和打分组件,可现实半颗星星效果 效果图: 参数名 类型 说明 score Number 分数 ,默认0,保留一位小数 disabled Boolean 是否只读,默认false,鼠标点击可以打 ...

随机推荐

  1. layui常用方法

    很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...

  2. [转]大数据时代,python竟是最好的语言?

      随着大数据疯狂的浪潮,新生代的工具Python得到了前所未有的爆发.简洁.开源是这款工具吸引了众多粉丝的原因.目前Python最热的领域,非数据分析和挖掘莫属了.从以Pandas为代表的数据分析领 ...

  3. 函数mod(a,m)

    Matlab中的函数mod(a,m)的作用: 取余数 例如: mod(25,5)=0; mod(25,10)=5; 仅此.

  4. grep-2.26 sed-4.2.2 awk-4.1.4 wget-1.18 pcregrep-8.39 pcre2grep-10.22 for windows 最新版本静态编译

    -------------------------------------------------------------------------------------------- grep (G ...

  5. WPF如何控制每个窗体确保只打开一次

    在主窗体上点击菜单时,如果做到每个窗体不会被重复打开,如果打开了,可以将其重新获得焦点. 首先在主窗体中将菜单关联的窗体实例化. 第二步:将每个菜单对应窗体的closing事件重写.之所以要重写clo ...

  6. JS中的if和else的用法以及基础语法

    正常里的变量方式.var a = 10; 针对整数.var b = 3.14; 针对的小数点.var c = "你好":双引号或者单引号引起来的是定义字符串. 一.类型转换(强制转 ...

  7. C语言 指针小结

    指针 -->指针变量 类型名 *变量名 int *point1; char *point2; 注意:*p可以直接使用,它代表指针p指向的变量,*p可以当做被指向的变量使用!~~~~ 一个变量的地 ...

  8. Python的方法解析顺序(MRO)

    mro即method resolution order,主要用于在多继承时判断调的属性的路径(来自于哪个类). http://blog.csdn.net/imzoer/article/details/ ...

  9. android Sqlite小记

    1.android.database.sqlite.SQLiteException: near "": syntax error (code 1): 语法错误,如果你的报了这个错误 ...

  10. HTML学习笔记--HTML的语法【1】

    1.什么是HTML标记语言? HTML是表示网页信息的符号标记语言. 2.HTML的标记和他的属性 HTML文档的保存格式:.html..htm..xhtml 标记和被标记的内容构建出HTML文档.格 ...