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

jq 根据值的正负变色

时间:2016-02-22 00:25:01      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

效果图这样:

技术分享

意思就是根据最后的百分值变色,值为负变绿色,值为正变红色。

所以只要取到那个标签里的值了,就能根据正负的判断决定颜色。

我的html部分这样:

/*不过他们都说我的dom结构不太合理,同意。BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/
             <div class="pro_detail">
                <!-- 列表详细信息 -->
                    <ul>
                        <li>001</li>
                        <li>椰香奶茶</li>
                        <li>¥ 10.00</li>
                        <li>¥ 10.50</li>
                        <li>-5%</li>
                    </ul>
                </div>

思路就是:找到每个UL最后一个li,获取它的值,根据正负来判断。

但是,我刚刚想到,如果是0也是会变绿色,是不是要这样呢?

JQ部分代码这样:

            // 根据正负值变色
            function oChange(){
                var  oUl = $(".pro_detail ul").length;//有多少行,行的个数

               for(var a = 0;a<oUl;a++){  

                    var s =  $(".pro_detail ul").eq(a).find(‘li‘).eq(4).html().replace(/%/, ‘‘);//除去 % 的数字内容
                    // alert(s);
                    if(s>0){  //如果值为正    后两个元素变红
                          $(".pro_detail ul").eq(a).find(‘li‘).eq(3).css({
                                "color" : "#ff6363"
                               });
                            $(".pro_detail ul").eq(a).find(‘li‘).eq(4).css({
                                "color" : "#ff6363"
                               });                                                             
                    } 
                    else{
                            $(".pro_detail ul").eq(a).find(‘li‘).eq(3).css({
                                "color" : "#3ebb2b"
                               });
                            $(".pro_detail ul").eq(a).find(‘li‘).eq(4).css({
                                "color" : "#3ebb2b"
                               });                            
                    }
                    }//f
                }//for     
 oChange();

 

jq 根据值的正负变色

标签:

原文地址:http://www.cnblogs.com/keytree/p/5205902.html

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