jq 根据值的正负变色

时间:2023-01-07 22:00:56

效果图这样:

jq 根据值的正负变色

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

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

我的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 根据值的正负变色的更多相关文章

  1. SVM中为何间隔边界的值为正负1

    在WB二面中,问到让讲一下SVM算法. 我回答的时候,直接答道线性分隔面将样本分为正负两类,取平行于线性切割面的两个面作为间隔边界,分别为:wx+b=1和wx+ b = -1. 面试官就问,为什么是正 ...

  2. radio值未出现JQ获取值问题

    $('input:radio[name="modelExtend.manageType"]:checked').val(); 选中的获取的值不是空或者null而是on

  3. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ( ̄▽ ̄)ノ. dom ...

  4. sql server日期字段值的比较

    sql server中对日期字段值的比较 sql server中对日期字段的比较方式有多种,介绍几种常用的方式:用northwind库中的employees表作为用例表.1.between...and ...

  5. 使用padding值控制控件的隐藏与显示

    在学自定义控件下拉刷新这一案例,控制ListView头条目和尾条目的显示隐藏时,就是设置其padding值的正负控制其的显示与隐藏.这并不是什么很大的知识点.只是一个小技巧,这里给大家分享一下. 这一 ...

  6. Javascript和jquery事件--鼠标滚轮事件WheelEvent

    <1>js事件 滚轮事件在js中,不同浏览器还是有不同的,介于我只测试谷歌和火狐浏览器的情况,其他浏览器有待自行探索.有三种写法: target.onmousewheel = wheel; ...

  7. redis incr incrby decr decrby命令

    incr.incrby.decr.decrby命令的作用和用法 redis中incr.incrby.decr.decrby属于string数据结构,它们是原子性递增或递减操作. incr递增1并返回递 ...

  8. 移动端图片随手势移动react组件(附移动开发小tips)

    这个效果是公司产品中一个用到的效果,用于展示项目的信息,废话少说,先上效果图,代码在最后:),这个组件是在上篇博客中用webpack搭建的环境中完成的http://www.cnblogs.com/wu ...

  9. Java基础知识【下】&lpar; 转载&rpar;

    http://blog.csdn.net/silentbalanceyh/article/details/4608360 (最终还是决定重新写一份Java基础相关的内容,原来因为在写这一个章节的时候没 ...

随机推荐

  1. 【Alpha】阶段汇总

    [项目文档&API文档] PhyLab2.0需求与功能分析改进文档(NABCD) PhyLab2.0设计分析阶段任务大纲(α) 团队个人贡献分分配规则 功能规格说明书 [Phylab2.0]A ...

  2. Web Scraping with Python读书笔记及思考

    Web Scraping with Python读书笔记 标签(空格分隔): web scraping ,python 做数据抓取一定一定要明确:抓取\解析数据不是目的,目的是对数据的利用 一般的数据 ...

  3. HDU 5074 Luck Competition (暴力,概率)

    题意:有 n 个人参加比赛,给出n-1个人的成绩,然后要选出一个幸运的人,先把所有的分数求平均数,然后再*2/3,那个不大于这个数,且最接近的数,就是最幸运的, 让你设置最后一个人的分,使他是最幸运的 ...

  4. JavaScript跨站脚本攻击

    跨站脚本攻击(Cross-Site Scrpting)简称为XSS,指的是向其他域中的页面的DOM注入一段脚本,该域对其他用户可见.恶意用户可能会试图利用这一弱点记录用户的击键或操作行为,以窃取用户的 ...

  5. Node&period;js-require的使用方法

    require最常用的方法 require('http') 内置模块 require('./server')  “./”表示当前路径,后面跟的是相对路径 require("../lib/se ...

  6. 编写自己的Nmap(NSE)脚本

    编写自己的Nmap脚本 一.介绍 在上一篇文章Nmap脚本引擎原理中我们介绍了基本的NSE知识,这篇文章介绍如何基于Nmap框架编写简单的NSE脚本文件,下一篇文章,Nmap脚本文件分析(AMQP协议 ...

  7. 32网络通信之Poll模型

    多路复用并发模型  -- poll #include<poll.h> int  poll(struct pollfd *fds,  unsigned int nfds, int timeo ...

  8. sqlServer的主键只能自增不能手动增加

    1. 2.找到相应的表,找到表设计.

  9. I&period;MX6 View长宽大于屏的分辨率

    /******************************************************************************** * I.MX6 View长宽大于屏的 ...

  10. openWRT自学---初始化过程和主要脚本的分析

    参考文档: http://wiki.openwrt.org/doc/techref/process.boot http://blog.csdn.net/jk110333/article/details ...