码迷,mamicode.com
首页 > 其他好文 > 详细

wex5中的星星评分

时间:2016-11-30 13:35:04      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:length   .com   number   添加   png   switch   case   debug   break   

新建一个空白的.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中的星星评分

标签:length   .com   number   添加   png   switch   case   debug   break   

原文地址:http://www.cnblogs.com/mehjb/p/6116932.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!