jq 根据值的正负变色

Posted 2020-06-14

效果图这样：

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

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

我的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();